Я не очень знаком с работой с шаблонно-управляемыми формами, и, вероятно, есть лучший способ сделать это Я собрал стек-блиц, который дает искомый результат.
По сути, вы собираетесь использовать @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()
, когда Форма отправлена. Вы проверите значение boolean
и требуемую ошибку в своем предупреждающем сообщении управления формой с помощью *ngIf
.
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