如何在 Angular2 中触发表单验证器

Posted 2023-02-22

【中文标题】如何在 Angular2 中触发表单验证器

【英文标题】：How to trigger Form Validators in Angular2

【发布时间】：2015-11-22 11:13:46

【问题描述】：

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

示例： 给定复选框 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']);
    
);

有人有解决办法吗？谢谢！

【问题讨论】：

您是否只是尝试根据 X 的值启用/禁用验证？您使用的是哪种验证器？您可以根据您范围内的条件使验证器执行，但我不确定该方法是否适合您。见：***.com/questions/21370006/…

@stephen.vakil - 我正在使用 angular2。

@Bonneville 你能解释一下你是如何将复选框状态传递给验证器函数的吗？

【参考方案1】：

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

看看这个：Angular 2 - AbstractControl

我认为你可以做的是：

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

这应该会触发并运行验证器。此外，状态也会更新。现在您应该可以在验证器逻辑中查看复选框值了。

希望这会有所帮助！

Validaton-Guide

FormControl Documentation

【讨论】：

感谢@Nightking 的建议，我会试试的。请注意，您的链接无效。

@Bonneville 感谢您提供信息。他们将表单代码提取到公共命名空间。事情的变化有点快:)。我已经更新了源链接。

我终于开始使用这段代码，它似乎对我有用。谢谢！顺便说一句，您的代码中有一个错字：updateValueAndValidity() 函数中缺少字母“e”。您的代码有更新而不是更新。干杯，这是一个很大的帮助！

链接已损坏；可能会更新为github.com/angular/angular/blob/master/packages/forms/src/…，虽然不完全相同。也可以链接到 Angular 文档

救命稻草！！我被卡住的用例是当用户提交表单而不触及单个表单控件时。表单无效，但控件未显示任何错误消息

【参考方案2】：

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

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

（this.form 是我的控制组）

【讨论】：

这实际上是正确的答案。如果你想单输入 this.form.controls['name'].markAsTouched();

【参考方案3】：

借助本博客

blog link

我遇到了一个结合夜王答案的解决方案

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

);

this.orderForm 是表单组

【参考方案4】：

这对我有用

this.myForm.markAllAsTouched();

【讨论】：

标记为已触摸的问题是，如果您正在跟踪更改，例如在离开时告诉他们有未保存的更改，那么这将触发该逻辑

【参考方案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
  );

【参考方案6】：

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

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

【参考方案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);
        
    ;