如果在 Angular 中单击提交时选中 none，则显示单选框的验证错误

Question

在此示例中，如果单击提交按钮且未选择性别，我想获得提示 "Die Angabe eines Geschlechtes ist erforderlich"。我怎样才能用按钮达到这个目的？我以为我可以在按下提交按钮时更改单选按钮的 'touched' 状态，但这只能通过反应形式实现，是吗？当按下提交按钮时，我对如何触发 nfIf 错误以显示提示感到有点困惑。

<form name="form" #f="ngForm" (ngSubmit)="f.form.valid && onSubmit()">
<div class="col-md-12">
  <div class="form-group col-md-4">
    <label class="btn btn-outline-primary" (click)="toggleActiveStatus($event)">
      <input class="radio-button" type="radio" name="selectedBy" id="female" [(ngModel)]="patient.gender"
             autocoplete="off" value="female" checked #selectedBy="ngModel" required> Weiblich
    </label>
    <label class="btn btn-outline-primary" (click)="toggleActiveStatus($event)">
      <input class="radio-button" type="radio" name="selectedBy" id="male" [(ngModel)]="patient.gender"
             autocomplete="off" value="male" checked #selectedBy="ngModel" required> Männlich
    </label>
    <div class="alert alert-warning" *ngIf="selectedBy.errors?.required && (selectedBy.dirty || selectedBy.touched)">Die Angabe eines Geschlechts ist erforderlich.
    </div>
  </div>

</div>
<button (click)="onSubmit()" type="submit" class="btn btn-primary">Weiter</button>

感谢您的帮助。

Answer 1

我不太熟悉使用模板驱动的表单，可能有更好的方法来执行此操作。我确实整理了一个 stackblitz，它产生了您正在寻找的结果。

基本上，您将使用 @ViewChild() 在 ts 支持文件中获取模板表单。您将有一个 boolean 属性来确定表单是否已提交。然后，您可以切换该布尔值并检查 onSubmit().

中的表单有效性

app.component.ts

export class AppComponent  {
  @ViewChild("f", { static: false })
  public form;

  public hasFormBeenSubmitted: boolean = false;
  public patient = {
    gender: ''
  }

  public onSubmit() {
    this.hasFormBeenSubmitted = true;

    // check for form validity
    if (this.form.invalid) {
      return;
    }

    console.log(this.patient);
  }
}

然后在您的模板中，您可以在提交表单时调用 onSubmit()。您将使用 *ngIf.

检查表单控件警报消息中的 boolean 值和所需的错误

app.component.html

<form name="form" #f="ngForm" (ngSubmit)="onSubmit()">
  <div class="col-md-12">
    <div class="form-group col-md-4">
      <label class="btn btn-outline-primary">
        <input class="radio-button" type="radio" name="selectedBy" id="female" [(ngModel)]="patient.gender"
              autocoplete="off" value="female" checked #selectedBy="ngModel" required> Weiblich
      </label>
      <label class="btn btn-outline-primary">
        <input class="radio-button" type="radio" name="selectedBy" id="male" [(ngModel)]="patient.gender"
              autocomplete="off" value="male" checked #selectedBy="ngModel" required> Männlich
      </label>
      <div class="alert alert-warning" *ngIf="selectedBy.errors?.required && hasFormBeenSubmitted">Die Angabe eines Geschlechts ist erforderlich.
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Weiter</button>
</form>

https://stackblitz.com/edit/angular-padcsk

如果在 Angular 中单击提交时选中 none，则显示单选框的验证错误

Show validation error for Radio Boxes if there is none checked when clicking Submit in Angular

validation

angular

angular-forms

angular-formbuilder

app.component.ts

app.component.html