原文

https://www.jianshu.com/p/da1fd5396798

大綱

　　1、模板驅動表單的創建
　　2、響應式表單的創建
　　3、模板驅動型表單的自定義指令
　　4、響應式表單的自定義指令
　　5、父組件向子組件傳遞表單控制
　　6、代碼素材

模板驅動表單的創建

//1、在根模塊註入依賴模塊
import { FormsModule }   from ‘@angular/forms‘;
//2、在模板中創建表單控件
<form>
  <div class="form-group">
    <label class="center-block">Name1:
      <input class="form-control">
    </label>
  </div>  
  <div class="form-group">
    <label class="center-block">Age1:
      <input class="form-control">
    </label>
  </div>
</form>
//3、在模板中添加ngModel同步數據
//4、數據校驗：模板型表單的數據校驗是寫在模板上的，
//將require、minlength等校驗規則寫在模板上，從而定義對應表單控件的校驗規則
//5、表單的提交，可以通過提交被監控的表單的值來達到表單的提交
//6、可以自定義設置表單數據的校驗
 

響應式表單的創建

//1、在根模塊註入依賴模塊，引入ReactiveFormsModule
import { ReactiveFormsModule } from ‘@angular/forms‘;
//2、在模板中創建form表單
//3、在組件中創建響應式表單控制器
ReactiveForm = new FormGroup({
    age: new FormControl(‘‘,[Validators.required])
});
//4、監控表單的值的變化
/*
a：數據模型的值的變化：這裏同樣需要ngModel來綁定數據模型和表單模型的值，
不過需要註意的是，如果用ngModel來綁定表單控件，
那麽通過new FormControl設置的默認值可能就會被ngModel的默認值給覆蓋了
b：表單模型的值的變化：可以通過監控{{ReactiveForm.value.age}}來監控值的變化
*/
//5、數據的校驗
/*
  各個表單控件的數據的校驗是需要通過FormControl來設置的，
  可以看到每個new FormControl後都可以對各個表單控件進行數據的校驗。
*/
//6、表單的提交
/*
(ngSubmit)="onSubmit(user)"通過ngSumbit即可實現表單數據的提交，
user是表單的名字，即：[formGroup]="user"
*/
//7、可以自定義設置表單數據的校驗
 

模板驅動型表單的自定義指令

　　模板型表單校驗需要通過模板中添加屬性才可以添加驗證，所以需要繼承指令Directive，在Directive中定義元數據並添加一系列的自定義的表單校驗規則。

/**
  equalCrk.direvtive.ts
  使用：
  <input name="nickName" id="nickName" [(ngModel)]=‘nickName‘ validateCrk>
  當輸入的數據不是crk的時候，表單的校驗是不會通過的
**/
import { Directive, forwardRef, Attribute } from ‘@angular/core‘;
import { NG_VALIDATORS, Validator, AbstractControl } from ‘@angular/forms‘;

@Directive({
  selector: ‘[validateCrk][ngModel]‘,
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => CrkValidatorDirective),
      multi: true
    }
  ]
})
export class CrkValidatorDirective implements Validator {
  constructor(
    @Attribute(‘validateCrk‘) public validateCrk: string) {
  }
  validate(c: AbstractControl): { [key: string]: any } {
    // 控件自身值
    const self = c.value;
    // 控件的值是否等於‘crk‘
    if (self !== ‘crk‘) {
      return {
        validateCrk: true
      };
    }
    return null;
  }
}
 

響應式表單的自定義指令

　　響應式的自定義校驗相對來說較簡單，需要滿足ValidatorFn即可。

/**
    響應式表單自定義指令
    使用：
     {validator: [this.validateEqualCrk(‘nickName‘,‘gg‘)]}
*/
validateEqualCrk(confirmKey: string, confirmStr?:string): ValidatorFn {
  return (group: FormGroup): {[key: string]: any} => {
    const confirmField = group.controls[confirmKey];
    const pattenStr = confirmStr ? confirmStr : ‘crk‘
    if (confirmField.value !== pattenStr) {
      return {
        validateEqualCrk: true
      };
    }
      return null;
  };
}

父組件向子組件傳遞表單控制

　　當表單中某個字段是以子組件的形式出現的時候，不能直接設置FormControl，因此需要向子組件傳遞FormControl然後在子組件添加，這樣才可以實現父組件表單對子組件表單元素的控制。

代碼素材

　　你可以在以下git代碼中找到我上述講述的知識點的實例代碼（angular的實例代碼中的angular-form）代碼中對如何創建模板驅動型表單，響應式表單、使用FormBuilder創建響應式表單、創建自定義指令（響應式表單的和模板驅動表單的自定義指令都有）以及深層次傳遞表單控制等知識點都有涉及到。

angular表單的使用實例