Question

查看我正在编辑的角形表单示例，我看到一个使用ngModel关键字而不将其分配给支持属性名称的示例。

<input ngModel required type="password" class="form-control" name="password" id="password" placeholder="Password" >

我通常会看到[ngModel]="password"或[(ngModel)]="password"

的约束括号

如果我们使用第一个示例的普通ngModel指令而没有赋值，那么绑定的输入数据是什么支持属性？它不受任何约束，只能从form.values访问吗？在什么用例中你想使用普通的ngModel指令 - 当你不需要绑定而只想从表单值访问它时？

Answer 1

我想到的一个用例就是当你不想将它绑定到某个字段时，但是你希望在它改变时更新你的模型，比如

<input ngModel (ngModelChange)="updateModel($event)"

以下代码不起作用，因为ngModelChange不是与NgModel指令匹配的选择器

<input (ngModelChange)="updateModel($event)"

因此，您需要添加一个栏ngModel来应用NgModel指令并获取ngModelChange个事件。

Answer 2

ngModel在ngForm指令中注册输入字段。输入的名称用作键。

一些-component.html

<form novalidate (ngSubmit)="save(form.value)" #form="ngForm" >
  <input type="text" name="title" ngModel />  
  <button type="submit" [disabled]="!form.valid">save</button>
</form>

一些-component.ts

...
save(value: any) {
   console.log(value.title);
}

如果从输入字段中删除ngModel，则value.title消失（未定义）。

在没有[（）]语法的情况下使用它时，ngModel指令的后备属性是什么

2 个答案: