angular使用from动态设置验证器（clearValidators、setValidators）

原文链接：https://www.longkui.site/program/frontend/angularfrom/4787/

0.背景

调试一个angular的form表单，根据条件动态赋予表单的权限验证。

主要介绍clearValidators和setValidators的用法。

1.代码

初始化代码：

import { Component, OnInit,  } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
@Component({
  selector: 'list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.less']
})
export class ListComponent implements OnInit {
    form: FormGroup;
 
  constructor(
    private formFB: FormBuilder,
  ) { }
  
  ngOnInit() {
    //初始化form
    this.form = this.formFB.group({
      id: [null, [Validators.required]],  //id, 不能为空
      name: [null, [Validators.required]], // 姓名 
      code: [null, [Validators.required]], // code
      num: [null, null], // num，可以为空
    })
  }
}

上面的代码用于初始化form表单。

然后，新增一个方法，用于动态配置验证器

import { Component, OnInit,  } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
@Component({
  selector: 'list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.less']
})
export class ListComponent implements OnInit {
    formNew: FormGroup;
 
  constructor(
    private formFB: FormBuilder,
  ) { }
  
  ngOnInit() {
    //初始化form
    this.formNew = this.formFB.group({
      id: [null, [Validators.required]],  //id, 不能为空
      name: [null, [Validators.required]], // 姓名 
      code: [null, [Validators.required]], // code
      num: [null, null], // num，可以为空
    })
  
  }
  flag=false
  check(){
    if(this.flag){
    this.formNew.get('name').setValidators([Validators.required]); //设置name字段为必须验证
 
    }else{
        this.formNew.get('name').clearValidators()  //清除name字段验证
    }
  }  
}