原文链接：https://www.longkui.site/program/frontend/angularfrom/4787/
0.背景
调试一个angular的form表单，根据条件动态赋予表单的权限验证。
主要介绍clearValidators和setValidators的用法。
1.代码
初始化代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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表单。
然后，新增一个方法，用于动态配置验证器
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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字段验证
}
}
}
|
通过setValidators 和clearValidators 可以动态设置验证和清除验证。
标签：name,required,list,setValidators,clearValidators,Validators,null,angular From： https://www.cnblogs.com/longkui-site/p/17750720.html