需求

当表单有一个值改变的时候，有一些字段要从不检验变成检验是否输入。

如下图：
image

image
当组织类型为Ordererorg的时候，读权限不需要验证

当组织类型为peerorg的时候，读权限需要验证

实现原理

通过自己写校验规则来实现

代码

1
2
3
4
5
6
7
8
ngOnInit() {
    this.validateForm = this.fb.group({
        // 组织类型   必填项
        typeOption: [null, [Validators.required]],
        // 读权限 根据自定义的peerorgValidator来校验
        read: [null, [this.peerorgValidator]],
    });
}
1
2
3
4
5
6
7
8
9
10
// type为peerorg时的表单验证函数
peerorgValidator = (control: FormControl): { [s: string]: boolean } => {
    // 如果typeOption是peerorg的话
    if (this.validateForm.controls['typeOption'].value === 'peerorg'){
        // 检查读权限的值，如果为空的话，返回错误{require: true}
        if (!control.value) {
            return { required: true };
        }
    }
}

这样就行了嘛？还差点。。。

当typeOption改变的时候，发现read并没有执行校验，需要我们手动执行一下

1
2
3
4
5
6
7
8
9
10
11
12
// 定义一个change事件，当typeOption改变的时候 重新校验read
typeOptionChange() {
    setTimeout(_ => {
      this.validateForm.controls['read'].updateValueAndValidity();
    });
  }
  
// html  直接用(ngModelChange)就行
<nz-select formControlName="typeOption"  (ngModelChange)="typeOptionChange()">
        <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option.value">
        </nz-option>
</nz-select>

OK