html - Angular 响应式表单 - 如何验证单选按钮并在表单提交时显示错误信息

目标：使单选按钮为必填项。

问题：元素 mat-error 及其内容一开始就显示，而表单尚未提交。元素 mat-error 及其内容应该仅在用户尝试提交表单时显示。

我尝试添加触摸条件，但我无法让它正常工作！

任何建议都欢迎！

HTML ：

<div class="mat-radio-group">
  <label class="label-mat-radio-group margin-space">Channel visibility</label>
  <mat-radio-group formControlName="visibility" aria-label="Select an option">
    <mat-radio-button value="public">Public</mat-radio-button>
    <mat-radio-button value="private">Private</mat-radio-button>
    <!-- fix: touched is not working -->
    <mat-error *ngIf="form.get('visibility').invalid">Please select channel visibility.</mat-error>
  </mat-radio-group>

</div>

组件：

initializeFormAndItsFields() {
  this.form = new FormGroup({
    title: new FormControl(null, {
      validators: [Validators.required, Validators.minLength(3)]
    }),
    visibility: new FormControl(null,{
      validators:[Validators.required]
    }),
    leadType: new FormControl(null,{
      validators:[Validators.required]
    }),
    keywords: new FormControl(null, {
      validators: [Validators.required, Validators.minLength(3)]
    }),
   
  });
}

答案＃1

如果“formControl”无效且已被触碰，mat-error 会显示为 defect。因此，通常在提交时可以使用 markAsTouched。

  submit(form: FormGroup) {
    if (form.valid) {
      ..do something...
    } else form.markAllAsTouched();
  }

在 stackblitz 中的小例子

答案＃2

声明一个标志（isSubmitted）来记录表单是否已提交。

isSubmitted: boolean = false;

添加 submit 事件，以便在点击提交按钮时将 isSubmitted 更新为 true。

<form [formGroup]="form" (submit)="isSubmitted = true">
  ...
</form>

当 isSubmitted 为 true 并且 FormControl 验证失败时，显示错误信息。

<mat-error *ngIf="isSubmitted && form.get('visibility').invalid">
  Please select channel visibility.
</mat-error>

StackBlitz 示例