有什么方法可以直观地通知用户尚未为 mat-button-toggle-group 设置任何内容? [英] Is there any way to visually notify the user that nothing has been set for the mat-button-toggle-group?

问题描述

我在步进组件表单中有一个必需的 mat-button-toggle-group，但是当没有选择任何内容时，没有视觉指示用户这是需要填写的字段.这是我的垫子按钮切换组:

选择狗的大小*
<mat-button-toggle-group required matInput formControlName="dogCtrl";名称=字体样式"aria-label=字体样式"><mat-button-toggle value=small">Small</mat-button-toggle><mat-button-toggle value=medium">Medium</mat-button-toggle><mat-button-toggle value=大">大</mat-button-toggle><mat-button-toggle value=giant">Giant</mat-button-toggle></mat-button-toggle-group>

据我所知，也不可能将组放在 mat-form-field 中.当我尝试这样做时，我收到此错误:

ERROR 错误:mat-form-field 必须包含一个 MatFormFieldControl.

我是 Angular 的新手，所以我们不胜感激.

解决方案

这里有一个更好的方法.这种方式更好，因为它根本不修改打字稿文件，并将所有验证留给验证器.

为此，我在表单中添加了两件事.

1. 要了解用户是否尝试提交表单，该表单必须是可引用的.这是通过添加 #form1="ngForm" 来完成的.在表单标签内.
2. 修改 mat-button-toggle-group 的外观，如果提交并且表单控件无效，则给该组一个类.

<div [ngClass]="{'mat-form-field-invalid': form1.submitted &&firstFormGroup.controls.dogsizeCtrl.invalid}"><label id="dogSizeLabel">我的狗大小 *</label><mat-button-toggle-group required matInput formControlName="dogsizeCtrl";名称=狗大小"aria-labelledby="dogSizeLabel";多个=假"><mat-button-toggle value=small">Small<span>0-15 lbs</span></mat-button-toggle><mat-button-toggle value=medium">Medium<span>16-40 lbs</span></mat-button-toggle><mat-button-toggle value=large">Large<span>40-100 lbs</span></mat-button-toggle><mat-button-toggle value=giant">Giant<span>101+ lbs</span></mat-button-toggle></mat-button-toggle-group>

<div><button mat-raised-button matStepperNext color="primary">Next</button>

</表单>

然后，要更改 mat-button-toggle-group 的外观，添加的类在 scss 中描述:

.mat-form-field-invalid mat-button-toggle-group {背景颜色:红色；}.mat-form-field-invalid label {红色 ;}

页面加载时的外观是这样的:

当用户在未选择狗大小的情况下尝试提交表单时:

I have a required mat-button-toggle-group inside of a stepper component form, but when nothing is selected, there is no visual indication to the user that this was the field that needed to be filled in. Here is my mat-button-toggle-group:

<h4>Choose a dog size *</h4>
<mat-button-toggle-group required matInput formControlName="dogCtrl" name="fontStyle" aria-label="Font Style">
      <mat-button-toggle value="small">Small</mat-button-toggle>
      <mat-button-toggle value="medium">Medium</mat-button-toggle>
      <mat-button-toggle value="large">Large</mat-button-toggle>
      <mat-button-toggle value="giant">Giant</mat-button-toggle>
</mat-button-toggle-group>

From what I understand, it is also not possible to put the group inside a mat-form-field either. When I try to do so, I get this error:

ERROR Error: mat-form-field must contain a MatFormFieldControl.

I'm new to Angular so any help would be appreciated.

解决方案

Here is a better way to do it. This way is better because it does not modify the typescript file at all, and leaves all validation to the Validators.

To do this, I added two things to the form.

1. To know whether the user attempted to submit the form, the form needs to be referenceable. This is done by adding the #form1="ngForm" inside the form tag.
2. To modify the appearance of the mat-button-toggle-group, the group is given a class if it is submitted and the form control is not valid.

<form [formGroup]="firstFormGroup" #form1="ngForm">
  <div [ngClass]="{'mat-form-field-invalid' : form1.submitted && firstFormGroup.controls.dogsizeCtrl.invalid}">
      <label id="dogSizeLabel">My Dog Size *</label>
      <mat-button-toggle-group required matInput formControlName="dogsizeCtrl" name="dogSize" aria-labelledby="dogSizeLabel" multiple="false">
        <mat-button-toggle value="small">Small<span>0-15 lbs</span></mat-button-toggle>
        <mat-button-toggle value="medium">Medium<span>16-40 lbs</span></mat-button-toggle>
        <mat-button-toggle value="large">Large<span>40-100 lbs</span></mat-button-toggle>
        <mat-button-toggle value="giant">Giant<span>101+ lbs</span></mat-button-toggle>
      </mat-button-toggle-group>
  </div>
  <div>
      <button mat-raised-button matStepperNext color="primary">Next</button>
  </div>
</form>

Then, to change the appearance of the mat-button-toggle-group, the class that was added is described in the scss:

.mat-form-field-invalid mat-button-toggle-group {
 background-color: red;
}

.mat-form-field-invalid label {
  color:red ;
}

The appearance goes from this when the page is loaded:

To this when the user attempts to submit the form when the dog size has not been selected:

这篇关于有什么方法可以直观地通知用户尚未为 mat-button-toggle-group 设置任何内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！