如果另一个属性设置为false，则忽略FormBuilder属性验证器规则

Question

在角2-5中使用 FormBuilder 时，如果FormBuilder组中的另一个属性设置为true/false，是否可以忽略验证器规则？

以以下代码为例：

this._fb.group({
    "stake": [data.stake, Validators.compose([Validators.min(1), Validators.required])],
    "isSelected": data.isSelected
  });

如果isSelected在表单中被设置为true，是否有一种方法可以忽略 set 中的验证器？

谢谢

Answer 1

为了做到这一点，您必须使用setValidators、clearValidators和updateValueAndValidity函数的组合，这些函数与角AbstractControl一起出现。

下面是一个示例：

isSelected: boolean;
form: FormGroup;
setStakeValidators(): void {
    const stakeControl = this.form.get('stake');
    if (this.isSelected === false) {
        stakeControl.setValidators([Validators.min(1), Validators.required]);
    } else {
        stakeControl.clearValidators();
    }
    stakeControl.updateValueAndValidity();
}

在这个示例函数中，首先从您正在使用的stake控件获得FormGroup控件。然后，根据isSelected的值，要么将验证器设置为所需的验证器，要么清除它们，这样就不会进行验证。之后，由于表单不会自动重新验证，然后在控件上运行updateValueAndValidity()以强制进行验证周期。

您将在上面包含的文档链接中注意到，在使用异步验证器的情况下，可以使用这些函数的异步版本。

监视isSelected窗体控件值更改的一种方法是订阅该控件可观察到的valueChanges，并根据订阅中返回的值运行对stake控件的验证器更改。

见下文：

this.form.get('isSelected').valueChanges.subscribe(value => {
    const stakeControl = this.form.get('stake');
    if (value === false) {
        stakeControl.setValidators([Validators.min(1), Validators.required]);
    } else {
        stakeControl.clearValidators();
    }
    stakeControl.updateValueAndValidity();
})

更新：

  this.betsForm = this.createFormGroup(this.betSlipItems);
  this.betsForm.get('isSelected').valueChanges.subscribe(value => { // console error here: TypeError: Cannot read property 'valueChanges' of null
      const stakeControl = this.betsForm.get('stake');
      if (value === false) {
        stakeControl.setValidators([Validators.min(1), Validators.required]);
      } else {
        stakeControl.clearValidators();
      }
      stakeControl.updateValueAndValidity();
    });

Answer 2

我认为最好的解决方案是将验证登录移到FormGroup本身。毕竟，这是交叉验证的一个例子，其中验证逻辑的部分依赖于多个表单元素。

import { Component } from '@angular/core';
import { Validators, ValidatorFn, FormGroup, FormControl, FormBuilder } from '@angular/forms';

const myValidator: ValidatorFn = (fg: FormGroup) => {
  const stake = fg.get('stake');
  const isSelected = fg.get('isSelected');

  if (isSelected.value) {
    return null;
  }

  const result = Validators.compose([Validators.required, Validators.min(5)])(stake);

  return !result || (!result.min && !result.required) ? null : { myError: true };
}

@Component({
  selector: 'my-app',
  template: `
   <form [formGroup]="form">
    <input type="checkbox" formControlName="isSelected" >Is Selected
    <input type="number" formControlName="stake" />
   </form>

   {{ form.valid }} 

  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      stake: [null],
      isSelected: [null]
    }, { validator: myValidator });
  }

}

现场演示