Angular 2条件Validators.required？

发布时间：2020-12-17 08:02:54 所属栏目：安全来源：网络整理

导读：我应该如何有条件地要求表格字段？我做了一个自定义验证器，但是我传递给自定义验证器的条件变量是静态的并保持其初始值。我的自定义验证器应该如何获得更新的条件值？也许有一种方法可以使用Validators.required而不是自定义验证器来做到这一点？ private f

我应该如何有条件地要求表格字段？我做了一个自定义验证器，但是我传递给自定义验证器的条件变量是静态的并保持其初始值。我的自定义验证器应该如何获得更新的条件值？也许有一种方法可以使用Validators.required而不是自定义验证器来做到这一点？

private foo: boolean = false;
private bar: boolean = true;

constructor(private _fb: FormBuilder) {
    function conditionalRequired(...conditions: boolean[]) {
      return (control: Control): { [s: string]: boolean } => {
        let required: boolean = true;
        for (var i = 0; i < conditions.length; i++) {
          if (conditions[i] === false) {
            required = false;
          }
        }
        if (required && !control.value) {
          return { required: true }
        }
      }
    }
    this.applyForm = _fb.group({
          'firstName': ['',Validators.compose([
            conditionalRequired(this.foo,!this.bar)
          ])],...
    });
}

更新(2016年5月17日)

发布此内容已经很长时间了，但我想引用ControlGroup类上可用的.include()和.exclude()方法，以供那些试图创建此功能的人使用。 (docs)虽然上面有条件验证器可能有用例，但我发现包含和排除控件，控件组和控件数组是处理这个问题的好方法。只需在您想要的控件上设置所需的验证器，并根据需要包含/排除它。希望这有助于某人！

根据您的评论，我可以看到一个潜在的问题。由于您为创建验证器函数的函数提供了条件作为基本类型，因此将使用调用第一个函数时的值。即使他们改变后，也不会考虑新的价值。

要归档您需要使用对象的条件，如下所述：

private foo: boolean = false;
private bar: boolean = true;

private conditions: any = {
  condition1: foo,condition2: !bar
};

constructor(private _fb: FormBuilder) {
    function conditionalRequired(conditions: any) {
      return (control: Control): { [s: string]: boolean } => {
        let required: boolean = true;
        for (var elt in conditions) {
          var condition = conditions[elt];
          if (conditions === false) {
            required = false;
          }
        }
        if (required && !control.value) {
          return { required: true };
        }
      }
    }
    this.applyForm = _fb.group({
          'firstName': ['',Validators.compose([
            conditionalRequired(conditions)
          ])],...
    });
}

这样，条件参数可以通过引用使用/更新。要更新您的条件，您需要执行以下操作：

updateConditions() {
  this.conditions.condition1 = true;
  this.conditions.condition2 = true;
}

这是一个傻瓜：https://plnkr.co/edit/bnX7p0?p=preview。

编辑

要在更新条件时运行验证程序，您需要显式调用控件的updateValueAndValidity方法。在这种情况下，控件和表单的有效属性将相应更新：

updateConditions() {
  this.conditions.condition1 = true;
  this.conditions.condition2 = true;
  this.applyForm.controls.firstName.updateValueAndValidity();
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!