[英]How to apply validation in angular 7 reactive forms on submit?
代碼:
onSubmit(){
if(this.Registration.invalid){
return;
}
alert('Thanks for submitting! Data:' + JSON.stringify(this.Registration.value));
}
HTML代碼:
<form class="admin-form" [formGroup]="Registration" (ngSubmit)="onSubmit()" id="Registration">
<mat-form-field appearance="outline">
<mat-label>username</mat-label>
<input matInput class="matInput" placeholder="username" type="text" formControlName="username">
<mat-icon matSuffix>person</mat-icon>
<mat-error *ngIf="Registration.controls['username'].invalid && (Registration.controls['username'].dirty ||Registration.controls['username'].touched)">
<div *ngIf="Registration.controls['username'].errors.required">
username is required.
</div>
<div *ngIf="Registration.controls['username'].errors.pattern">
username must be characters and special characters.
</div>
</mat-error>
</mat-form-field>
<button mat-icon-button type="submit" value="submit">
<i class="material-icons">send</i>
</button>
</form>
提交按鈕上的 Angular 7 反應式表單驗證,我希望如果有任何錯誤或輸入字段為空,則該表單不應成功提交。
移除!
因為當表單無效時它返回true
,即它有錯誤,當表單有效時返回false
,例如:
if (this.Registration.invalid) {
return;
}
alert('Thanks for submitting! Data:' + JSON.stringify(this.Registration.value));
但是最好使用form.valid
來檢查表單Validation, here
解釋here
所以valid
的變化是使用!
:
if (!this.Registration.valid) {
return;
}
alert('Thanks for submitting! Data:' + JSON.stringify(this.Registration.value));
另一種方式和推薦:
如果表單無效,您也可以禁用按鈕本身,因此在表單有效之前,提交按鈕將被disabled
,例如:
[disabled]="!Registration.valid" OR [disabled]="Registration.invalid"
帶按鈕:
<button mat-icon-button type="submit" [disabled]="!Registration.valid" value="submit">
<i class="material-icons">send</i>
</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.