Question

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

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

Answer 1

一种怪异的解决方法-我实际上需要form-field-lable，但它也可以解决mat-error-在form-field内使用类型为checkbox的输入，同时隐藏了已连接的输入形式，像这样：

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

向复选框添加错误处理的解决方法：

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

欢呼

Answer 3

来自文档：

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

mat-error无法添加到复选框

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

3 个答案: