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.

要使用该表单注册的子控件，请使用带有 name 属性的 NgModel。你可以使用 NgModelGroup 在表单中创建子组。

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.

监听表单提交link

Listening for form submissionlink

下面的示例显示如何从 “ngSubmit” 事件中捕获表单值。

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>
    

Native DOM validation UIlink

In order to prevent the native DOM form validation UI from interfering with Angular's form validation, Angular automatically adds the novalidate attribute on any <form> whenever FormModule or ReactiveFormModule are imported into the application. If you want to explicitly enable native DOM validation UI with Angular forms, you can add the ngNativeValidate attribute to the <form> element:

      
        content_copy
      
      <form ngNativeValidate>
  ...
</form>