如果在Angular中单击Submit时未选中任何复选框，则显示Radio Boxes的验证错误

Question

在这个例子中，如果点击提交按钮并且没有选择性别，我想得到提示"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>

谢谢你的帮助。

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