Angular2 FormGroup验证 - 标记特定控件无效答案

【问题标题】：Angular2 FormGroup validation - mark specific control invalidAngular2 FormGroup验证 - 标记特定控件无效
【发布时间】：2017-10-08 01:34:24
【问题描述】：

我有一个使用 FormGroup 的 Angular 2 Reactive 表单。我需要比较两个字段的值，因此我在创建时将验证器传递给 FormGroup。验证效果很好：

this.form = this.formBuilder.group({
  add: this.formBuilder.group({
    mobile: ['', [
      Validators.required,
      this.duplicate
    ]],
    voice: [false]
  }),
  existing: this.formBuilder.array([])
}, {validator: this.validateDuplicates});

validateDuplicates(group: FormGroup): any {
  let adding = group.get('add').get('mobile').value;
  if (!adding) {
    return null;
  }

  let matches: boolean[] = (group.get('existing') as FormArray).controls
    .map(control => {
      return control.get('number').value;
    })
    .filter(val => val === adding);

  return matches.length > 0 ? {
    duplicate: {adding}
  } : null;
}

在我输入无效值后，form.errors.duplicate 字段被正确填充，并且表单组在 DOM 中被标记为 ng-invalid CSS 类。

我唯一的差距是，当这个组级验证器失败时，我希望将特定的表单控件标记为ng-invalid。有没有办法做到这一点？我曾尝试将验证器函数返回的对象弄乱以匹配目标表单控件的嵌套层，但无济于事。

在短期内，当表单无效时，我可以通过在特定元素上添加额外的标记和样式来解决它，但理想情况下我希望能够摆脱它，并解决特定的错误代码仅在该控件的标记中，而不是上升到父表单组级别：

<md-input-container class="primary" floatPlaceholder="never">
    <input mdInput name="mobile" type="text" pattern="^\([0-9]{3}\)\s[0-9]{3}\-[0-9]{4}$" placeholder="Number" formControlName="mobile" required>
    <md-hint *ngIf="!addControl.touched &amp;&amp; addControl.invalid" align="start" color="warn">(202) 555-5555</md-hint>
    <md-hint *ngIf="addControl.touched &amp;&amp; addControl.invalid" align="end" color="warn">Format must be (###) ###-####</md-hint>
    <!-- Workaround I'd like to remove -->
    <md-hint *ngIf="form.errors &amp;&amp; form.errors.duplicate">Numbers must be unique</md-hint>
</md-input-container>

【问题讨论】：

首先，当您使用reactive forms 时，推荐的添加验证器的方式（也许是正确的方式）是在组件中，而不是在模板中。所以在您的情况下，Pattern 和 required 必须去仅在组件中。此外，Material2 中有 md-error 可用于显示错误。现在关于你的问题，一个笨拙的人来证明它会很好。

标签： angular angular2-forms angular-reactive-forms

【解决方案1】：

要将特定控件标记为无效并为其分配您选择的任意错误，您可以在您选择的控件上使用setErrrors 方法。这也设置了父控件/组的有效性。

例如，在确定包含 [a] 重复值 [s] 的错误控件 [s] 后，您可以在自定义验证器方法中执行此操作：

faultyCtrl.setErrors({duplicate: true});

不要忘记从您的自定义验证器返回错误以正确设置组的错误属性，因为setErrors 仅设置status 属性，但不设置errors（请参阅this更多信息）

【讨论】：