angular - Angular2 FormGroup の検証 - 特定のコントロールを無効とマークする

Question

FormGroup を使用した Angular 2 Reactive フォームがあります。2 つのフィールドの値を比較する必要があるため、作成時に 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-invalidDOM の 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>