typescript 角React表单-如何验证单选按钮并在表单提交时显示错误消息

rn0zuynd 于 2022-12-24 发布在 TypeScript

关注(0)|答案(3)|浏览(163)

目标：使单选按钮成为必需。
问题：元素mat-error及其内容在未提交表单的情况下立即显示。元素mat-error及其内容应仅在用户尝试提交表单时显示。
我试着添加触摸标准，但我不能让它工作!
欢迎提出任何建议!
超文本：

<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)]
    }),
   
  });
}

typescript

来源：https://stackoverflow.com/questions/74895985/angular-reactive-form-how-to-validate-radio-buttons-and-show-error-message-whe

3条答案

按热度按时间

ecbunoof1#

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

isSubmitted: boolean = false;

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

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

1.当isSubmitted为true且FormControl未通过验证时显示错误消息。

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

Demo @ StackBlitz

赞(0）回复(0）举报 2022-12-24

f1tvaqid2#

不确定这是否有用。尝试touched，如下所示

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

赞(0）回复(0）举报 2022-12-24

6ju8rftf3#

如果“formControl”无效并被触摸，则会通过defect显示mat-error，因此，通常可以在提交时使用markAsTouched

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

stackblitz中的一个小示例

赞(0）回复(0）举报 2022-12-24

我来回答

typescript 角React表单-如何验证单选按钮并在表单提交时显示错误消息

3条答案

相关问题

热门标签

最新问答