web-dev-qa-db-ja.com

Angular検証エラーが表示されない入力のマテリアルマットチップリスト

現在、mat-chip-list withおよびinputに関する奇妙な問題に直面しています。連絡先と名前の2つのフォームコントロールを持つフォームグループがあります。

_this.form = this.formBuilder.group({
    name: ['', [Validators.required]],
    contactIds: ['', [Validators.required]]
})
_

このフォームのビューは次のようになります。

_<mat-form-field #contactsChipList>
    <mat-chip-list>
        <mat-chip *ngFor="let contact of contacts" [removable]="removable" (remove)="removeChipListItem(contact)">
            {{ contact.name | titlecase }} {{ contact.surname | titlecase }}
        <mat-icon matChipRemove *ngIf="removable"></mat-icon>
        </mat-chip>
        <input [matChipInputFor]="contactsChipList" placeholder="Contacts" formControlName="contactIds" />
        <mat-error *ngIf="form.hasError('required', 'contactIds')">This field is required</mat-error>
    </mat-chip-list>
</mat-form-field>
_

問題：入力フィールドからすべての要素を削除すると、親フォーム（formGroup）は無効としてマークされますが、formGroupのerrorプロパティに値が含まれません。したがって、エラーは表示されません。

その他の試行：しかし、mat-chip-listを使用せずにmatInput属性を持つ通常の入力要素を使用すると、入力フィールドのコンテンツを削除するとエラーが適切に表示されます。

その場合、マークアップは次のようになります。

_<div class="form-group">
    <mat-form-field>
        <input matInput placeholder="Contacts" formControlName="contactIds" />
        <mat-error *ngIf="form.hasError('required', 'contactIds')">This field is required</mat-error>
    </mat-form-field>
</div>
_

仮定：問題はmat-chip-list要素にあると今は信じています。 @Input()errorStateMatcher: ErrorStateMatcherを調べてみましたが、使用方法がまだわかりません。 Googleはその検索に友好的ではありません。

誰もこの問題を経験しましたか？説明が必要な場合はお知らせください。

angulartypescriptangular-material2
7
Gloire

<mat-chip-list>にバリデーターを追加し、次のように無効なアイテムが追加されないようにする必要があります。

成分：

export class ExampleComponent {
    items = [];
    emailFormControl = new FormControl('', [Validators.email]);

    addItem(event) {
        if (this.emailFormControl.valid) {
            items.Push(event.value)
        }
    }

    .
    .
    .
}

テンプレート：

<mat-form-field>
    <mat-chip-list [formControl]="emailFormControl">
        .
        .
        .
    </mat-chip-list>
</mat-form-field>

編集済み：FormGroupを使用しているようです。次のようにngDefaultControlをmat-chip-listに追加する必要があります。良い説明を読むことができます こちら 。

<mat-form-field>
    <mat-chip-list ngDefaultControl [formControl]="form.controls.contactIds">
        .
        .
        .
        <mat-error *ngIf="form.controls.contactIds.hasError('required', 'contactIds')">This field is required</mat-error>
    </mat-chip-list>
</mat-form-field>
3
Junx