当您在没有 [()] 语法的情况下使用它时，ngModel 指令的支持属性是什么

Question

查看我正在编辑的 angular 表单示例，我看到一个使用 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 指令的支持属性是什么

What is the backing property for ngModel directive when you use it without the [()] syntax

angular

angular-forms

当您在没有 [()] 语法的情况下使用它时，ngModel 指令的支持 属性 是什么

What is the backing property for ngModel directive when you use it without the [()] syntax

angular

angular-forms

当您在没有 [()] 语法的情况下使用它时，ngModel 指令的支持属性是什么