Angular 如果在中单击“提交”时未选中任何复选框，则显示单选框的验证错误

在本例中，如果单击submit按钮且未选择性别，我希望得到提示“Die Angabe eines Geschlechtes ist erforderlich”。我怎样才能用按钮够到这个？ 我以为我可以在按下提交按钮时更改单选按钮的“触碰”状态，但这仅适用于反应式表单，是吗？当按下Submit按钮时，我对如何触发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>

威布里奇
玛尼里奇
这是一个很好的例子。
魏特

---

谢谢您的帮助。

我对使用模板驱动的表单不太熟悉，可能有更好的方法。我确实组织了一次stackblitz，产生了你想要的结果

基本上，您将使用

@ViewChild（）

在

ts

备份文件中获取模板表单。您将有一个

boolean

属性来确定表单是否已提交。然后可以切换该布尔值，并在

onSubmit（）中检查表单有效性

app.component.ts
导出类AppComponent{
@ViewChild（“f”，{static:false}）
公共形式；
public hasFormBeenSubmitted:boolean=false；
公共病人={
性别：''
}
公共onSubmit（）{
this.hasFormBeenSubmitted=true；
//检查表格的有效性
if（此.form.invalid）{
返回；
}
console.log（this.patient）；
}
}

然后，在提交表单时，您可以在模板中调用
onSubmit（）
。您将使用
*ngIf
检查表单控制警报消息中的
布尔值和所需错误

app.component.html

威布里奇
玛尼里奇
这是一个很好的例子。
魏特


我不太熟悉使用模板驱动的表单，可能有更好的方法。我确实组织了一次stackblitz，产生了你想要的结果

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

app.component.ts
导出类AppComponent{
@ViewChild（“f”，{static:false}）
公共形式；
public hasFormBeenSubmitted:boolean=false；
公共病人={
性别：''
}
公共onSubmit（）{
this.hasFormBeenSubmitted=true；
//检查表格的有效性
if（此.form.invalid）{
返回；
}
console.log（this.patient）；
}
}

然后，在提交表单时，您可以在模板中调用
onSubmit（）
。您将使用
*ngIf
检查表单控制警报消息中的
布尔值和所需错误

app.component.html

威布里奇
玛尼里奇
这是一个很好的例子。
魏特


谢谢你的快速帮助！很好。谢谢你的快速帮助！很好。