Question

我正在使用角形材料-垫自动完成内部表格。我想在表单无效时在输入字段和matAutocomplete输入的mat错误消息上显示红色突出显示的文本和边框颜色。建议采用反应式或模板驱动形式

Answer 1

chips-autocomplete-exaple.ts文件

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

您可以传递一个初始值，而不是null

chips-autocomplete-exaple.html文件

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

类似地添加错误边框，您可以使用[ngClass]

希望这会有所帮助。

Answer 2

将模板参考变量添加到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页面

  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 3

我做到了

scss

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

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

Answer 4

作为一种解决方法，您可以侦听表单中的状态更改并手动设置chipList的errorState：

@ViewChild('chipList') chipList: MatChipList;

ngOnInit() {
  this.myForm.get('names').statusChanges.subscribe(
    status => this.chipList.errorState = status === 'INVALID'
  );
}

https://stackblitz.com/edit/angular-4d5vfj-gywxjz

角材料-芯片自动完成-如何显示所需的错误消息和错误突出显示颜色

4 个答案: