web-dev-qa-db-fra.com

Angular matériel mat-chip-list avec entrée ne montrant pas d'erreur de validation

Je suis actuellement confronté à un problème étrange avec mat-chip-list avec et entrées. J'ai un groupe de formulaires qui a deux contrôles de formulaire: contacts et nom.

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

La vue de ce formulaire ressemble à ceci:

<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>

Problème: Lorsque je supprime tous les éléments du champ de saisie, le formulaire parent (formGroup) est marqué comme non valide mais la propriété error du formGroup ne contient aucune valeur. Donc, l'erreur ne s'affiche jamais.

Autre tentative: Mais lorsque j'utilise un élément d'entrée normal avec un attribut matInput sans liste mat-chip, l'erreur s'affiche correctement lorsque je supprime le contenu du champ de saisie.

Voici à quoi ressemble le balisage dans ce cas:

<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>

Hypothèse: Je crois maintenant que le problème réside dans l'élément mat-chip-list. J'ai essayé d'examiner: @Input()errorStateMatcher: ErrorStateMatcher mais je ne sais pas encore comment l'utiliser. Google n'a pas été amical avec cette recherche.

Quelqu'un a eu ce problème? Si vous avez besoin de clarifications, faites-le moi savoir.

angulartypescriptangular-material2
7
Gloire

Vous devez ajouter le validateur dans <mat-chip-list> et empêcher l'ajout d'éléments non valides comme suit.

Composant:

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

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

    .
    .
    .
}

Modèle:

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

Modifié: Il semble que vous utilisiez FormGroup. Vous devez ajouter ngDefaultControl au mat-chip-list comme suit. Vous pouvez lire une bonne explication ici .

<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