I am trying to implement a reset password form with Angular 7 Form Validation as the example in here . In this example, we have three fields, including old password, new password and confirm password. If I click an input field, such as the old password field without entering any value and then click another input field such as new password field, I will be able to see an error message from the validation. However, if I touch none of three input fields and click update directly, there are no errors displayed. How can I implement the feature that validation errors are displayed for each input field when I click the button?
You have just to replace your div wrapper with a form tag.
<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>
But you can solve your problem also disabling the button if the form group is invalid:
<button [disabled]="formGroup.invalid" (click)='update()' mat-flat-button color="primary">Update</button>
All the best.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.