NgModellink

说明link

这个 FormControl 实例将会跟踪值、用户交互和控件的验证状态，以保持视图与模型的同步。 如果用在某个父表单中，该指令还会把自己注册为这个父表单的子控件。

The FormControl instance tracks the value, user interaction, and validation status of the control and keeps the view synced with the model. If used within a parent form, the directive also registers itself with the form as a child control.

这个指令可以单独使用，也可以用作一个大表单的一部分。你所要做的一切就是用 ngModel 选择器来激活它。

This directive is used by itself or as part of a larger form. Use the ngModel selector to activate it.

它可以接受一个领域模型作为可选的 Input。如果使用 [] 语法来单向绑定到 ngModel，那么在组件类中修改领域模型将会更新视图中的值。 如果使用 [()] 语法来双向绑定到 ngModel，那么视图中值的变化会随时同步回组件类中的领域模型。

It accepts a domain model as an optional Input. If you have a one-way binding to ngModel with [] syntax, changing the domain model's value in the component class sets the value in the view. If you have a two-way binding with [()] syntax (also known as 'banana-in-a-box syntax'), the value in the UI always syncs back to the domain model in your class.

如果你希望查看与 FormControl 相关的属性（比如校验状态），你也可以使用 ngModel 作为键，把该指令导出到一个局部模板变量中（如：#myVar="ngModel"）。 你也可以使用该指令的 control 属性来访问此控件，实际上你要用到的大多数属性（如 valid 和 dirty）都会委托给该控件，这样你就可以直接访问这些属性了。 你可以在 AbstractControlDirective 中直接查看这些属性的完整列表。

To inspect the properties of the associated FormControl (like thevalidity state), export the directive into a local template variable using ngModel as the key (ex: #myVar="ngModel"). You can then access the control using the directive's control property. However, the most commonly used properties (like valid and dirty) also exist on the control for direct access. See a full list of properties directly available in AbstractControlDirective.

在独立控件模式下使用 ngModellink

Using ngModel on a standalone controllink

如果你希望查看与 FormControl 相关的属性（比如校验状态），你也可以使用 ngModel 作为键，把该指令导出到一个局部模板变量中（如：#myVar="ngModel"）。 你也可以使用该指令的 control 属性来访问此控件，实际上你要用到的大多数属性（如 valid 和 dirty）都会委托给该控件，这样你就可以直接访问这些属性了。 你可以在 AbstractControlDirective 中直接查看这些属性的完整列表。

下面是一个在简单的独立控件中使用 ngModel 的例子：

The following examples show a simple standalone control using ngModel:

      
        content_copy
      
      import {Component} from '@angular/core';

@Component({
  selector: 'example-app',
  template: `
    <input [(ngModel)]="name" #ctrl="ngModel" required>

    <p>Value: {{ name }}</p>
    <p>Valid: {{ ctrl.valid }}</p>

    <button (click)="setValue()">Set value</button>
  `,
})
export class SimpleNgModelComp {
  name: string = '';

  setValue() {
    this.name = 'Nancy';
  }
}
    

当在 <form> 标签中使用 ngModel 时，你还需要提供一个 name 属性，以便该控件可以使用这个名字把自己注册到父表单中。

When using the ngModel within <form> tags, you'll also need to supply a name attribute so that the control can be registered with the parent form under that name.

在父表单的上下文中，通常不用包含单向或双向绑定，因为这个父表单将会为你同步该值。 你可以使用 ngForm 把它导出给一个模板局部变量（如 #f="ngForm"），以访问它的属性。 可以在任何需要提交表单的地方使用它。

In the context of a parent form, it's often unnecessary to include one-way or two-way binding, as the parent form syncs the value for you. You access its properties by exporting it into a local template variable using ngForm such as (#f="ngForm"). Use the variable where needed on form submission.

如果你只是要为表单设置初始值，对 ngModel 使用单向绑定就够了。在提交时，你可以使用从表单导出的值，而不必使用领域模型的值。

If you do need to populate initial values into your form, using a one-way binding for ngModel tends to be sufficient as long as you use the exported form's value rather than the domain model's value on submit.

在表单中使用 ngModellink

Using ngModel within a formlink

下面的例子展示了如何在表单中使用 ngModel：

The following example shows controls using ngModel within a form:

      
        content_copy
      
      import {Component} from '@angular/core';
import {NgForm} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <input name="first" ngModel required #first="ngModel">
      <input name="last" ngModel>
      <button>Submit</button>
    </form>

    <p>First name value: {{ first.value }}</p>
    <p>First name valid: {{ first.valid }}</p>
    <p>Form value: {{ f.value | json }}</p>
    <p>Form valid: {{ f.valid }}</p>
  `,
})
export class SimpleFormComp {
  onSubmit(f: NgForm) {
    console.log(f.value);  // { first: '', last: '' }
    console.log(f.valid);  // false
  }
}
    

在表单组中使用独立 ngModellink

Using a standalone ngModel within a grouplink

下面的例子演示了如何在表单中使用独立 ngModel 控件。它控制表单的显示，但并不包含表单数据。

The following example shows you how to use a standalone ngModel control within a form. This controls the display of the form, but doesn't contain form data.

      
        content_copy
      
      <form>
  <input name="login" ngModel placeholder="Login">
  <input type="checkbox" ngModel [ngModelOptions]="{standalone: true}"> Show more options?
</form>
<!-- form value: {login: ''} -->
    

通过选项设置 ngModel 的 name 属性link

Setting the ngModel name attribute through optionslink

下面的例子展示了设置 name 属性的另一种方式。该 name 属性要和自定义表单组件一起使用，而该自定义组件的 @Input 属性 name 已用作其它用途。

The following example shows you an alternate way to set the name attribute. Here, an attribute identified as name is used within a custom form control component. To still be able to specify the NgModel's name, you must specify it using the ngModelOptions input instead.

      
        content_copy
      
      <form>
  <my-custom-form-control name="Nancy" ngModel [ngModelOptions]="{name: 'user'}">
  </my-custom-form-control>
</form>
<!-- form value: {user: ''} -->