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>