Question

在angular2中，我希望在更改另一个控件时触发某些控件的Validators。有什么方法可以告诉表单重新验证？更好的是，我可以要求验证特定字段吗？

实施例：给出Checkbox X并输入P. 输入P具有基于X的模型值而行为不同的验证器。当选中/取消选中X时，我需要在P上调用验证器.P上的验证器将查看模型以确定X的状态并相应地验证P.

以下是一些代码：

constructor(builder: FormBuilder) {
    this.formData = { num: '', checkbox: false };

    this.formGp = builder.group({
        numberFld: [this.formData.num, myValidators.numericRange],
        checkboxFld: [this.formData.checkbox],
    });
}

this.formGp.controls['checkboxFld'].valueChanges.observer({
    next: (value) => {
        // I want to be able to do something like the following line:
        this.formGp.controls['numberFld'].validator(this.formGp.controls['numberFld']);
    }
});

有人有解决方案吗？谢谢！

Answer 1

我不知道你是否还在寻找答案，所以这是我的建议：

看看这个：Angular 2 - AbstractControl

我认为你可以做的是：

this.formGp.controls['checkboxFld'].valueChanges.observer({
    next: (value) => {
       this.formGp.controls['numberFld'].updateValueAndValidity();
    }
});

这应该触发并运行验证器。此外，州也得到了更新。现在，您应该能够查询验证器逻辑中的复选框值。

希望这有帮助！

编辑：更新了链接和示例。在我写答案时代码发生了变化。

EDIT_2：alpha.48将EventEmitter.observer更改为EventEmitter.subscribe！

EDIT_3：更改了实际实施的链接，添加了文档链接

Validaton-Guide

FormControl Documentation

Answer 2

使用我的ControlGroup我这样做是因为我有错误div检查是否触摸

for (var i in this.form.controls) {
  this.form.controls[i].markAsTouched();
}

（this.form是我的ControlGroup）

Answer 3

有更优雅的方法来建模这种行为 - 例如，将您的状态放入ReplaySubject并观察它，然后使用异步验证器观察状态 - 但下面的伪编码方法应该有效。您只需在复选框中观察值更改，根据需要更新模型，然后使用updateValueAndValidity cal强制重新验证numberFld。

constructor(builder: FormBuilder) {
  this.formData = { num: '', checkbox: false };
  const numberFld = builder.control(this.formData.num, myValidators.numericRange);

  const checkbox = builder.control(this.formData.checkbox);
  checkbox.valueChanges.map(mapToBoolean).subscribe((bool) => {
    this.formData.checked = bool;
    numberFld.updateValueAndValidity(); //triggers numberFld validation
  });

  this.formGp = builder.group({
      numberFld: numberFld,
      checkboxFld: checkbox
  });
}

Answer 4

在此博客的帮助下

blog link

我遇到了结合Nightking答案的解决方案

Object.keys(this.orderForm.controls).forEach(field => {
       const control = this.orderForm.get(field);
       control.updateValueAndValidity();

});

this.orderForm 是表单组

Answer 5

这帮了我大忙

this.myForm.markAllAsTouched();

Answer 6

您可以通过这种方式触发验证：

this.myform.get('myfield').updateValueAndValidity();

Answer 7

static minMaxRange(min: number, max: number): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        if (Validators.min(min)(control)) { // if min not valid
            return Validators.min(min)(control);
        } else {
            return Validators.max(max)(control);
        }
    };
}

有人知道如何在Angular2中触发Form Validators吗？

7 个答案: