我正在尝试使用 Angular 7 Form Validation 实现重置密码表单作为 here 中的示例.在这个例子中,我们有三个字段,分别是旧密码、新密码和确认密码。如果我单击一个输入字段,例如没有输入任何值的旧密码字段,然后单击另一个输入字段,例如新密码字段,我将能够看到一条来自验证的错误消息。但是,如果我不触摸三个输入字段中的任何一个并直接单击更新,则不会显示任何错误。如何实现点击按钮时显示每个输入字段验证错误的功能?
最佳答案
您只需用表单标签替换您的 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>
祝一切顺利
关于javascript - 单击提交按钮时 Angular 7 表单验证不显示错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58352429/