angular表單的使用實例

原文

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

大綱

　　一、模板驅動表單的建立
　　二、響應式表單的建立
　　三、模板驅動型表單的自定義指令
　　四、響應式表單的自定義指令
　　五、父組件向子組件傳遞表單控制
　　六、代碼素材

模板驅動表單的建立

//一、在根模塊注入依賴模塊
import { FormsModule }   from '@angular/forms';
//二、在模板中建立表單控件
<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>
//三、在模板中添加ngModel同步數據
//四、數據校驗：模板型表單的數據校驗是寫在模板上的，
//將require、minlength等校驗規則寫在模板上，從而定義對應表單控件的校驗規則
//五、表單的提交，能夠經過提交被監控的表單的值來達到表單的提交
//六、能夠自定義設置表單數據的校驗

響應式表單的建立

//一、在根模塊注入依賴模塊，引入ReactiveFormsModule
import { ReactiveFormsModule } from '@angular/forms';
//二、在模板中建立form表單
//三、在組件中建立響應式表單控制器
ReactiveForm = new FormGroup({
    age: new FormControl('',[Validators.required])
});
//四、監控表單的值的變化
/*
a：數據模型的值的變化：這裏一樣須要ngModel來綁定數據模型和表單模型的值，
不過須要注意的是，若是用ngModel來綁定表單控件，
那麼經過new FormControl設置的默認值可能就會被ngModel的默認值給覆蓋了
b：表單模型的值的變化：能夠經過監控{{ReactiveForm.value.age}}來監控值的變化
*/
//五、數據的校驗
/*
  各個表單控件的數據的校驗是須要經過FormControl來設置的，
  能夠看到每一個new FormControl後均可以對各個表單控件進行數據的校驗。
*/
//六、表單的提交
/*
(ngSubmit)="onSubmit(user)"經過ngSumbit便可實現表單數據的提交，
user是表單的名字，即：[formGroup]="user"
*/
//七、能夠自定義設置表單數據的校驗

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

　　模板型表單校驗須要經過模板中添加屬性才能夠添加驗證，因此須要繼承指令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建立響應式表單、建立自定義指令（響應式表單的和模板驅動表單的自定義指令都有）以及深層次傳遞表單控制等知識點都有涉及到。