[英]Angular 7 Form Validation does not show error when clicking submit button
我正在嘗試使用 Angular 7 Form Validation 作為此處的示例來實現重置密碼表單。 在這個例子中,我們有三個字段,包括舊密碼、新密碼和確認密碼。 如果我單擊一個輸入字段,例如舊密碼字段而不輸入任何值,然后單擊另一個輸入字段,例如新密碼字段,我將能夠從驗證中看到一條錯誤消息。 但是,如果我沒有觸摸三個輸入字段並直接單擊更新,則不會顯示錯誤。 如何實現單擊按鈕時為每個輸入字段顯示驗證錯誤的功能?
您只需用表單標簽替換您的 div 包裝器。
<form id='reset-password' [formGroup]='formGroup'>
<mat-form-field class="reset-password-fields">
<input matInput required [(ngModel)]="oldPassword" [type]="displayOldPassword ? 'text' : 'password'"
autocomplete="off" [formControl]="oldPasswordFormControl" [errorStateMatcher]="appErrorMatcher" required>
<mat-placeholder class="placeholder" color="primary">{{ 'enter-your-old-password' }}</mat-placeholder>
<mat-icon matSuffix (click)="displayOldPassword = !displayOldPassword">
{{displayOldPassword ? 'visibility' : 'visibility_off'}}</mat-icon>
<mat-error *ngIf="oldPasswordFormControl.hasError('required')">
Old password cannot be
<strong>empty</strong>
</mat-error>
</mat-form-field>
<mat-form-field class="reset-password-fields">
<input matInput required [(ngModel)]="newPassword" [type]="displayNewPassword ? 'text' : 'password'"
autocomplete="off" [formControl]="newPasswordFormControl" [errorStateMatcher]="appErrorMatcher" required>
<mat-placeholder class="placeholder" color="primary">{{ 'enter-your-new-password' }}</mat-placeholder>
<mat-icon matSuffix (click)="displayNewPassword = !displayNewPassword">
{{displayNewPassword ? 'visibility' : 'visibility_off'}}</mat-icon>
<mat-error *ngIf="newPasswordFormControl.hasError('required')">
New password cannot be
<strong>empty</strong>
</mat-error>
</mat-form-field>
<mat-form-field class="reset-password-fields">
<input matInput required [(ngModel)]="confirmNewPassword" [type]="displayConfirmNewPassword ? 'text' : 'password'"
autocomplete="off" [formControl]="confirmNewPasswordFormControl" [errorStateMatcher]="appErrorMatcher" required>
<mat-placeholder class="placeholder" color="primary">{{ 'confirm-your-new-password' }}
</mat-placeholder>
<mat-icon matSuffix (click)="displayConfirmNewPassword = !displayConfirmNewPassword">
{{displayConfirmNewPassword ? 'visibility' : 'visibility_off'}}</mat-icon>
<mat-error *ngIf="formGroup.invalid">
Confirm new password does not match password
</mat-error>
</mat-form-field>
<div>
<button (click)='update()' mat-flat-button color="primary">Update</button>
</div>
</form>
但是,如果表單組無效,您也可以禁用按鈕來解決您的問題:
<button [disabled]="formGroup.invalid" (click)='update()' mat-flat-button color="primary">Update</button>
一切順利。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.