響應式表單校驗方法彙總

一 .創建一個響應式表單
1.引入模塊

import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';

2.注入

 public storyForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.storyForm = this.fb.group({
      sonsName: [null, [Validators.required, Validators.maxLength(220)]],
      isIteration: [null],
    });
    }

二. 用法

1.  禁用

    1. 禁用全部表單
   this.storyForm.disable()
   2.   禁用表單單個條件
    this.storyForm..get('isIteration').disable();

2.啓用禁用

    1. 啓用全部表單
   this.storyForm.enable()
   2.   啓用表單單個條件
    this.storyForm..get('isIteration').enable();

3.啓用禁用

    1. 清空全部表單
   this.storyForm.reset()
   2.   清空表單單個條件
    this.storyForm..get('isIteration').reset();

4.賦值

    1. 批量賦值
   this.storyForm.patchValue({isIteration:值 , sonsName:值 });
    2.   單個賦值
    this.storyForm.get('isIteration').patchValue("值");

5. 動態添加校驗

 this.storyForm.get('isIteration').setValidators([Validators.required])
 
 this.storyForm.get('isIteration').setValidators([Validators.required,Validators.maxLength(50)])

6.移除校驗

方法一
this.storyForm.get('sonsName').resetFields() //移除校驗結果並重置字段值
方法二
this.storyForm.get('sonsName').clearValidators() //移除校驗結果

7.更新表單中的校驗器

this.storyForm.updateValueAndValidity()
this.storyForm.enable()

注意： 更新了表單中的校驗器以後，然後通過enable()方法，根據值和校驗器重新計算狀態

8.表單中某項選擇變化的回調

this.storyForm.get('isIteration').valueChanges.subscribe(isIteration =>{ }）

三. FormArray 和 FormGroup的多層嵌套中方法

  this.validateForm = this.fb.group({
      workFlowContent: this.fb.array([
        this.fb.group({
          sonsName: [null, [Validators.required, Validators.maxLength(220)]],
          isIteration: [null],
          ]}
       ])
    });
         
  get workFlowContent(): FormArray {
    return this.validateForm.get('workFlowContent') as FormArray;
  }

1.獲取某個表單中的一個值（獲取，操作）

 ((this.validateForm.get('workFlowContent') as FormArray).controls[0]).get('isIteration').value;

2.獲取全部的值（獲取）

 (this.validateForm.get('workFlowContent') as FormArray).value

相關其他類似方法同上，類似實現請移步