角度模板驱动表单中的模型绑定不起作用答案

【问题标题】：Model binding in angular template driven forms doesn't work角度模板驱动表单中的模型绑定不起作用
【发布时间】：2018-09-12 20:41:46
【问题描述】：

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

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

【问题讨论】：

...您的问题是什么？您是否要求我们调试您的代码，因为它做了一些超出您预期的事情？如果是这样，它做了什么，你期望什么？
我想将我的输入模型与 formModel 属性绑定，但它不起作用。

标签： javascript angular typescript

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：