0

我有一个使用 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 字段被正确填充，并且表单组ng-invalid在 DOM 中用 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>
4

1 回答 1

1

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

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

faultyCtrl.setErrors({duplicate: true});

不要忘记从自定义验证器返回错误以正确设置组的错误属性，因为setErrors只设置status属性，而不是（有关更多信息，errors请参阅此）

于 2017-09-27T11:25:12.120 回答