Input 如何在输入上使用ngModel（Angular-TypeScript）

我是Angular的新手，我正在尝试制作一个表单来请求一些用户的输入，这样我就可以做一个简单的注册。当我尝试在输入中使用ngModel进行双向数据绑定时，我得到一个错误，即“无法绑定到‘ngModel’，因为它不是‘input’的已知属性”。在搜索论坛一段时间后，我发现常见的解决方案是在我的app.module中导入FormsModule，所以我这样做了，但没有任何改变。奇怪的是，在导入之后，typescript停止在编辑器上显示错误，但当我尝试执行“ng serve”时，它会将错误抛出控制台

我会在这里添加我的相关代码，以便您可以检查它，但在几乎一个小时试图找到解决方案后，我不断得到错误，这就是我来问的原因，因为我似乎无法找到其他相关问题的正确解决方案

如果相关的话，我也在使用priming

（请注意，我的表单中只有一个输入字段，因为我想在添加更多输入之前先解决问题）

注册.component.html

<div class="text-layout">
  <div class="p-fluid p-grid">
    <div class="p-field p-col-12 p-md-4">
        <span class="p-float-label">
            <input pInputText [(ngModel)]="usernamevalue" type="text" id="username">
        </span>
    </div>
  </div>
</div>

注册.module.ts

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-sign-up',
 templateUrl: './sign-up.component.html',
 styles: [
 ]
})
export class SignUpComponent implements OnInit {

usernamevalue: any;

constructor() { }

ngOnInit(): void {
}

}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SignUpComponent } from './sign-up.component';
import { PrimeNgModule } from '../prime-ng/prime-ng.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';



@NgModule({
declarations: [
 SignUpComponent
],
imports: [
 CommonModule,
 PrimeNgModule,
 FormsModule,
 ReactiveFormsModule
],
exports: [
 SignUpComponent
]
})
export class SignUpModule { }

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MainPageModule } from './main-page/main-page.module';
import { SharedModule } from './shared/shared.module';
import { AppRouterModule } from './app-router.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  BrowserModule,
  MainPageModule,
  SharedModule,
  AppRouterModule,
  FormsModule,
  ReactiveFormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

应用程序模块.ts

import { Component, OnInit } from '@angular/core';

@Component({
 selector: 'app-sign-up',
 templateUrl: './sign-up.component.html',
 styles: [
 ]
})
export class SignUpComponent implements OnInit {

usernamevalue: any;

constructor() { }

ngOnInit(): void {
}

}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SignUpComponent } from './sign-up.component';
import { PrimeNgModule } from '../prime-ng/prime-ng.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';



@NgModule({
declarations: [
 SignUpComponent
],
imports: [
 CommonModule,
 PrimeNgModule,
 FormsModule,
 ReactiveFormsModule
],
exports: [
 SignUpComponent
]
})
export class SignUpModule { }

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { MainPageModule } from './main-page/main-page.module';
import { SharedModule } from './shared/shared.module';
import { AppRouterModule } from './app-router.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  BrowserModule,
  MainPageModule,
  SharedModule,
  AppRouterModule,
  FormsModule,
  ReactiveFormsModule
 ],
 providers: [],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

---

如果你需要我提供更多的代码，我愿意帮助你，并将其张贴在这些，非常感谢你的时间

问题是

[（ngModel）]

需要

名称

标签。 您可以通过以下方式解决此问题：

<div class="text-layout">
  <div class="p-fluid p-grid">
    <div class="p-field p-col-12 p-md-4">
        <span class="p-float-label">
            <input pInputText [(ngModel)]="usernamevalue" type="text" name="usernamevalue">
        </span>
    </div>
  </div>
</div>

---

这是愚蠢的，是的，但在角度上是必需的。控制台错误是什么？