Angular Material - Chips Autocomplete - как отобразить требуемое сообщение об ошибке и цвет выделения ошибки

Question

Пример ссылки на Stackblitz

Я использую угловой материал - мат-автозаполнение внутренней формы.Я хочу показать красный выделенный текст и цвет рамки в поле ввода и сообщение об ошибке mat для автозаполнения ввода matAutocomplete, когда форма недействительна.Предложение для реактивной или шаблонной формы будет работать

Answer 1

Добавьте переменную ссылки шаблона в поле mat-form-field

<mat-form-field #tagsField>
        <mat-label><strong>Tags</strong></mat-label>
        <mat-chip-list #chipList>
          <mat-chip *ngFor="let tag of tags" [selectable]="selectable" [removable]="removable"
            (removed)="remove(tag)" required>
            {{tag}}
            <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
          </mat-chip>
          <input placeholder="eg.(C#,VB)" #tagInput [formControl]="frmAskQuestion.controls['tags']"
            [matAutocomplete]="auto" [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur"
            (matChipInputTokenEnd)="add($event)" required>
        </mat-chip-list>
        <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" required>
          <mat-option *ngFor="let tag of filteredTags" [value]="tag">
            {{tag}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>

, а затем введите ts page

  if (!this.frmAskQuestion.valid) {
  this.tagsField._elementRef.nativeElement.classList.add("mat-form-field-invalid");
}
else{
  this.tagsField._elementRef.nativeElement.classList.remove("mat-form-field-invalid");
}

Примечание: это не лучший способ, но я не смог найти ни одногоДругой способ

Answer 2

Я сделал это.

scss

/deep/ .mat-form-field-invalid {
  .mat-form-field-underline {
    background-color: #f44336;
  }

  .mat-form-field-label {
    color: #f44336;
  }
}

Answer 3

файл chips-autocomplete-exaple.ts

import {FormControl, Validators} from '@angular/forms';
fruitCtrl = new FormControl(null, Validators.required);

вместо нуля, вы можете передать начальное значение,

файл chips-autocomplete-exaple.html

  <span *ngIf="fruitCtrl.invalid && fruitCtrl.touched">
     required
   </span>

аналогично добавлению границ ошибок, которые вы можете использовать [ngClass]

Надеюсь, это поможет.