Question

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

采用以下代码示例：

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

如果 isSelected 在表单中设置为true，是否有办法忽略赌注中的验证器？

由于

Answer 1

为了做到这一点，您必须使用Angular AbstractControl附带的setValidators，clearValidators和updateValueAndValidity函数组合。

以下是一个例子：

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 observable，并根据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 });
  }

}

Live demo

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

2 个答案: