Angular Material 2：在 mat-checkbox 中添加 mat-error

Question

我想知道是否可以为复选框添加验证错误消息（mat-error），例如包括所需的验证。

<mat-checkbox [formControl]="formControl">
  <ng-content></ng-content>
</mat-checkbox>
<mat-error *ngIf="formControl.hasError('required')">

Answer 1

从文档：

mat-form-field ：通过在表单字段内添加 mat-error 元素，可以在表单字段下划线下显示错误消息。

mat-error 不能添加到复选框

Answer 2

嗯，一个奇怪的工作 - 我实际上需要表单字段标签，但它也适用于 mat-error - 在表单字段内使用复选框类型的输入，同时隐藏连接到表单的输入，像这样：

<mat-form-field  appearance="standard">
    <mat-label>check</mat-label>
    <input matInput formControlName="check" [hidden]="true">
    <input (change)="check()" type="checkbox">
    <mat-error>{{ getErrorForCheck() }}</mat-error>
</mat-form-field>

是的，它很丑，但是为了让我的表单带有复选框的标签（或错误），我使用它。

Answer 3

向 Checkbox 添加错误处理的解决方法：

<mat-checkbox 
   formControlName="agreeConditions" 
   [ngClass]="{'errorCheckbox': checkBoxError}"
>I agree
</mat-checkbox>

<mat-error *ngIf="checkBoxError">
   {{errorMessage}}
</mat-error>

您也可以为 checkBoxError 插入一个函数。 将 var "checkBoxError" 更改为函数调用 getCheckBoxError()

component.ts 功能：

getCheckBoxError() {
if(this.formGroup.touched) {
  const value = this.formGroup.get('agreeConditions').invalid;
//You can call .hasError('required') as well!
  return value;
}
return false;
}

干杯