[英]Angular - show error message on submit when form is invalid
我有这个表单,如果我将其留空或无效,则每个字段下都会显示一条错误消息。
<form #projectForm="ngForm" (ngSubmit)="onSubmit()">
<div class="form-group col-md-6" [class.has-error]="codeControl.invalid && codeControl.touched">
<label class="control-label">code</label>
<input type="text" class="form-control" required [(ngModel)]="projet.code" id="code" name="code" #codeControl="ngModel">
<span class="help-block" *ngIf="codeControl.invalid && codeControl.touched">code is required </span>
</div>
<div class="form-group col-md-6" [class.has-error]="libelleControl.invalid && libelleControl.touched">
<label class="control-label">libelle</label>
<input type="text" class="form-control" required [(ngModel)]="projet.libelle" id="libelle" name="libelle" #libelleControl="ngModel">
<span class="help-block" *ngIf="libelleControl.invalid && libelleControl.touched"> libelle is required </span>
</div>
<button type="submit" class="btn btn-primary" >submit </button>
</form>
但是当涉及到提交按钮时,我不希望提交按钮在表单有效之前被禁用,而是希望提交按钮边框变为红色,并且在单击时提交按钮下方显示红色错误消息,并且表格无效。 我怎样才能做到这一点?
我会使用简单的 getter 来管理“提交 btn”的状态
get isFormValid():boolean {
this.ngForm && this.ngForm.valid;
}
然后
<button type="submit" class="btn btn-primary" [class.cssClassToManageBtnState]="isFormValid" >submit </button>
试试这个:在你的组件上
success: any;
constructor ()
{
this.success = true;
}
onSubmit(){
if(this.yourform.invalid){
this.success= false;
return;
}
}
在你的 html 上
<div *ngIf="success;then content else other_content"></div>
<ng-template #content>
<button type="submit" class="btn btn-primary" >submit </button>
</ng-template>
<ng-template #other_content>
<button type="submit" class="btn btn-primary" style="border: 2px solid red">submit
</button>
<!-- your error message goes here -->
</ng-template>
我在How to use *ngIf else?复制了 *ngIf 在这里?
我们必须覆盖提交按钮的默认行为。 因此,删除按钮类型为提交并向其添加点击事件
<button type="button" (click)="onSubmit()" class="btn btn-primary" >submit </button>
删除表单标签中的提交事件
<form #projectForm="ngForm">
将条件类添加到按钮
<button type="submit" (click)="onSubmit()" class="btn btn-primary" [ngClass]="projectForm.valid ? '' : 'invalid-form-btn'" >submit </button>
<span *ngIf="!projectForm.valid">The form is not valid </span>
.invalid-form-btn {
border: 1px solid red;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.