在角度模板驱动的表单中提交时显示表单验证错误
在角度模板驱动的表单中提交时显示表单验证错误
提问于 2018-06-08 08:24:40
我已经在Angular中创建了模板驱动的表单。
<form novalidate #f="ngForm" (ngSubmit)="onSubmit(f)">
<input type="text" class="form-control" name="fullName" #fullName="ngModel" required>
<div *ngIf="fullName.errors?.required && fullName.touched" class="validation-message">Required</div>
<button type="submit">Post</button>当它无效并被触摸时，它会显示错误。我需要在提交表单时显示错误，即当单击提交按钮时。
onSubmit({value, valid}): void {
if (valid) {
console.log(value);
} else {
console.log('invalid form');
}
}回答 3
Stack Overflow用户
发布于 2018-06-08 09:02:54
当标志有效时将其设置为true并使用$ngIf: HTML
<form #myForm="ngForm" (submit)="onSubmit(myForm)">
<input type="text" class="form-control" required [(ngModel)]="fullname" name="fullname" #input="ngModel">
<div style="color:red" *ngIf="submittedError">
Error
</div>
<br><br>
<button type="submit">Post</button>
</form>打字：
submittedError;
...
onSubmit({value, valid}): void {
if (valid) {
this.submittedError=false;
console.log(value);
} else {
this.submittedError=true;
console.log('invalid form');
}
}
}Stack Overflow用户
发布于 2018-06-08 09:04:45
您必须使用额外的标志来完成此操作。
如下所示，
submitted = false;
onSubmit() { this.submitted = true; }并在*ngIf语句中插入submitted。
参考：https://angular.io/guide/forms#toggle-two-form-regions-extra-credit
Stack Overflow用户
发布于 2018-09-27 20:17:44
补充一下答案: ngForm公开了一个submitted标志。因此，只需创建一个模板变量，并对错误执行ngIf (即。ngForm.submitted === true)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50751793
复制相关文章
相似问题