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

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-指南

FormControl文档

Answer 2

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

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

(this.form是我的ControlGroup)

Answer 3

这对我有用

this.myForm.markAllAsTouched();

Answer 4

在这个博客的帮助下

博客链接

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

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

});

this.orderForm是表单组

Answer 5

有更优雅的方法来建模这种行为 - 例如,将您的状态放入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
  });
}