代码之家 › 专栏 › 技术社区 › User123

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

typescript angular javascript

0

User123 · 技术社区 · 7 年前

我试着用角度模板驱动的形式绑定模型。我创建了一个模型类并用它填充输入字段。

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

1 回复 | 直到 7 年前

1

2

Peter Kim 7 年前

name: "abc" 应该是 name= "abc" name: string = "abc" ). 现在您正在将名称类型声明为“abc”,这不是您想要的。

2

0

Mahaveer 7 年前

您已将名称绑定为“abc”数据类型。所以如果你想用html绑定你的模型,你可以定义你的formModel类,

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