响应式表单校验方法汇总

一 .创建一个响应式表单
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("值");
  1. 动态添加校验
 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

相关其他类似方法同上,类似实现请移步

你可能感兴趣的:(form,typescript,angular)