NgFormlink

说明link

只要你导入了 FormsModule，该指令就会默认在所有 <form> 标签上生效。你不需要再添加任何特殊的选择器。

As soon as you import the FormsModule, this directive becomes active by default on all <form> tags. You don't need to add a special selector.

你可以以 ngForm 作为 key 把该指令导出到一个局部模板变量（如 #myForm="ngForm"）。这是可选的，但很有用。 来自本指令背后的 FormGroup 实例的很多属性，都被复制到了指令自身，所以拿到一个对该指令的引用就可以让你访问此表单的聚合值和验证状态， 还有那些用户交互类的属性，比如 dirty 和 touched。

You optionally export the directive into a local template variable using ngForm as the key (ex: #myForm="ngForm"). This is optional, but useful. Many properties from the underlying FormGroup instance are duplicated on the directive itself, so a reference to it gives you access to the aggregate value and validity status of the form, as well as user interaction properties like dirty and touched.

To register child controls with the form, use NgModel with a name attribute. You may use NgModelGroup to create sub-groups within the form.

如果需要，还可以监听该指令的 ngSubmit 事件，以便当用户触发了一次表单提交时得到通知。发出 ngSubmit 事件时，会携带原始的 DOM 表单提交事件。

If necessary, listen to the directive's ngSubmit event to be notified when the user has triggered a form submission. The ngSubmit event emits the original form submission event.

在模板驱动表单中，所有 <form> 标签都会自动应用上 NgForm 指令。 如果你只想导入 FormsModule 而不想把它应用于某些表单中，比如，要想使用 HTML5 验证，你可以添加 ngNoForm 属性， 这样标签就不会在 <form> 上创建 NgForm 指令了。 在响应式表单中，则不需要用 ngNoForm，因为 NgForm 指令不会自动应用到 <form> 标签上，你只要别主动添加 formGroup 指令就可以了。

In template driven forms, all <form> tags are automatically tagged as NgForm. To import the FormsModule but skip its usage in some forms, for example, to use native HTML5 validation, add the ngNoForm and the <form> tags won't create an NgForm directive. In reactive forms, using ngNoForm is unnecessary because the <form> tags are inert. In that case, you would refrain from using the formGroup directive.

从废弃的 ngForm 选择器迁移过来link

Migrating from deprecated ngForm selectorlink

对 ngForm 元素选择器的支持已经在 Angular v6 中废弃，并将在 Angular v9 中移除。

Support for using ngForm element selector has been deprecated in Angular v6 and will be removed in Angular v9.

之所以弃用它，是我们要让所有选择器都跟其它核心 Angular 选择器保持统一，而元素选择器通常写作中线格式。

This has been deprecated to keep selectors consistent with other core Angular selectors, as element selectors are typically written in kebab-case.

已废弃的写法：

Now deprecated:

      
        content_copy
      
      <ngForm #myForm="ngForm">
    

以后的写法：

After:

      
        content_copy
      
      <ng-form #myForm="ngForm">
    

Listening for form submissionlink

The following example shows how to capture the form values from the "ngSubmit" event.

      
        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
  }
}
    

Setting the update optionslink

The following example shows you how to change the "updateOn" option from its default using ngFormOptions.

      
        content_copy
      
      <form [ngFormOptions]="{updateOn: 'blur'}">
   <input name="one" ngModel>  <!-- this ngModel will update on blur -->
</form>