角度模板驱动形式的模型绑定不起作用

Question

我正在尝试以角度模板驱动的形式绑定模​​型。我创建了一个模型类，并使用它来填充输入字段。

HTML：

<div class="form-group col-md-2 col-12" [class.text- danger]="nameCode.invalid &&  nameCode.touched">
<label for="inputName"  class="form-control-label"> Name</label>
<input type="text" class="form-control" [class.is-form-invalid]="nameCode.invalid &&  nameCode.touched" id="inputName" name="lotCode"[(ngModel)]="formModel.name" #nameCode="ngModel" aria-describedby="nameHelp" autocomplete="new-password" required>
<small id="nameHelp" class="text-danger" *ngIf="nameCode.invalid && nameCode.touched">Required</small>

组件：

export class AppComponent  {
formModel: FormModel= new FormModel();
}
export class FormModel {
name: "abc"
}

https://stackblitz.com/edit/angular-yue9fe?file=src%2Fapp%2Fapp.component.ts

Answer 1

name: "abc"应该是name= "abc"（或name: string = "abc"）。现在，您将名称类型声明为“ abc”，这不是您想要的。

Answer 2

您已将名称绑定为“ abc”数据类型。因此，如果您想用html绑定模型，则可以定义formModel类，

export class FormModel {
   constructor(public name="abc"){}
}