Как показать ошибки внутри формы при отправке в угловых 5?
У меня есть следующая форма, сценарий TS и сообщение об ошибке для проверки:
<form [formGroup]="tripForm" (ngSubmit)="addTrip(tripForm)" novalidate>
<div class="form-group">
<label class="control-label">Trip Name</label>
<input type="text" class="form-control" placeholder="" id="newTripName" name="newTripName" formControlName="newTripName">
<div *ngIf="tripForm.controls['newTripName'].errors && (tripForm.controls['newTripName'].dirty || tripForm.controls['newTripName'].touched)">
<div class="error_message" *ngIf="tripForm.controls['newTripName'].errors.required">
<span class="e_arrow"></span>
<i>Please enter Trip Name</i>
</div>
</div>
</div>
</form>
ngAfterViewInit() {
this.tripForm = new FormGroup ({
newTripName: new FormControl('', {
validators: Validators.compose([
Validators.required
]),
updateOn: 'blur'
})
});
}
addTrip(tripForm:NgForm) {
if (!tripForm.valid) {
return;
}
}
Проверка корректно работает с событием размытия, но проблема в том, что проверка также должна работать при отправке. Метод isvalid возвращает false, но я не уверен, как показать сообщение об ошибке. Как вы можете видеть, я показываю сообщение только тогда, когда поле формы грязное или сенсорное, а это не тот случай, когда форма отправляется.
Любая идея, что следует изменить / добавить в код выше, чтобы сделать его форму при отправке?
Благодарю.