typescript - Angular material mat-chip-list med input som ikke viser valideringsfeil

Jeg står for øyeblikket overfor et merkelig problem med mat-chip-list og input. Jeg har en formgruppe som har to formkontroller: kontakter og navn.

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

Visningen for dette skjemaet ser slik ut:

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

Problem: Når jeg fjerner alle elementene fra inndatafeltet, blir foreldreformularen (formGroup) merket som ugyldig, men feilegenskapen til formGroup inneholder ingen verdier. Så feilen vises aldri.

Andre forsøk: Men når jeg bruker et vanlig input-element med et matInput-attributt uten en mat-chip-list, vises feilen riktig når jeg fjerner innholdet i inndataboksen.

Slik ser markeringen ut i så fall:

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

Antakelse: Jeg tror nå at problemet ligger i mat-chip-list-elementet. Jeg prøvde å se nærmere på: @Input()errorStateMatcher: ErrorStateMatcher, men jeg er ikke sikker på hvordan jeg skal bruke det ennå. Google har ikke vært hjelpsom med det søket.

Har noen opplevd dette problemet? Hvis du trenger avklaringer, gi meg beskjed.

Svar #1

Du bør legge til validatoren i <mat-chip-list> og forhindre at ugyldige elementer legges til som følger.

Komponent:

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

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

    .
    .
    .
}

Mal:

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

Redigert: Det ser ut til at du bruker FormGroup. Du må legge til ngDefaultControl på mat-chip-list som følger. Du kan lese en god forklaring her.

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

Relaterte artikler