Angular 如何解决使用ngModel的问题

Angular 如何解决使用ngModel的问题,angular,Angular,我正在尝试绑定ngModel表单输入文本,但它不起作用,这是我的问题 regi.component.html。 在我的html部分中,我将输入标记与ngModel一起使用,但是这个ngModel不打印我的字符串值 <input id="name" name="name" [(ngModel)]="hero" > 就这样 我只想用html打印我的值 但是当我保存文件时, 此错误显示在终端中 这是我的注册模块 import

我正在尝试绑定ngModel表单输入文本,但它不起作用,这是我的问题 regi.component.html。 在我的html部分中,我将输入标记与ngModel一起使用
,但是这个ngModel不打印我的字符串值

<input id="name" name="name" [(ngModel)]="hero"  >
就这样
我只想用html打印我的值 但是当我保存文件时,
此错误显示在终端中

这是我的注册模块

import { NgModule } from '@angular/core';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { RegiRoutingModule } from "./regi-routing.module";



@NgModule({
  declarations: [ ],
  imports: [CommonModule,
            FormsModule,ReactiveFormsModule,
            RegiRoutingModule],
},
)
export class RegiModule { }
当保存并查看vs代码终端时

这是我的项目结构

如果要将表单字段与输入绑定,则无需使用NgModel,可以通过以下方式进行设置:

<input id="name" name="name" class="form-control"
      required minlength="4" appForbiddenName="bob"
      formControlName="name" >

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>
  <div *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

</div>

名称是必需的。
名称的长度必须至少为4个字符。
姓名不能是Bob。
此外,您必须在绑定之前创建的表单的formGroup中声明:

<form [formGroup]="heroForm">
  // your form info here
</form>

//您的表格信息在这里
尝试在app.module.ts中导入formsModule

import { NgModule } from '@angular/core';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { RegiRoutingModule } from "./regi-routing.module";



@NgModule({
  declarations: [ ],
  imports: [CommonModule,
            FormsModule,ReactiveFormsModule,
            RegiRoutingModule],
},
)
export class RegiModule { }

你到底想要什么
 import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms'; 
    import { ReactiveFormsModule } from '@angular/forms';
    
    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        ReactiveFormsModule
      ], 
      declarations: []
      }
    )