如何使用 JavaScript Angular 比较新密码和确认密码

Question

I need to compare below new password field and confirm password field. This is the form

    <form novalidate (ngSubmit)="changepasswordform.form.valid && changePassword(this.changepassword, changepasswordform)"
    #changepasswordform="ngForm">
 <div class="form-group row">
                    <label for="email5" class="col-sm-5 col-md-5 col-form-label">New Password</label>
                    <div class="col-sm-7 col-md-7">
                        <input type="password" class="form-control" pattern="^(?=.*[A-Za-z])(?=.*\d).{8,}$" required
                            [class.is-invalid]="newpassword.invalid && newpassword.touched" name="newpasswords"
                            #newpassword="ngModel" [(ngModel)]="changepassword.newPassword"
                            placeholder="New Password">

                        <div [class.d-none]="newpassword.valid || newpassword.untouched">
                            <small class=" text-danger" *ngIf="newpassword.errors?.required">Password is
                                required</small>
                            <small *ngIf="newpassword.hasError('pattern')" class=" text-danger">
                                Password should be 8 characters, at least one
                                letter and one number</small>
                        </div>
                    </div>
                </div>

<div class="form-group row">
                    <label for="email5" class="col-sm-5 col-md-5 col-form-label">Confirm Password</label>
                    <div class="col-sm-7 col-md-7">
                        <input type="password" class="form-control"
                            [class.is-invalid]="repassword.invalid && repassword.touched" name="repassword"
                            #repassword="ngModel" placeholder="Confirm Password" compare="newpassword"
                            [(ngModel)]="changepassword.repassword" required>

                        <div [class.d-none]="repassword.valid || repassword.untouched">
                            <small *ngIf="repassword.errors?.required" class="text-danger">Confirm password is
                                required</small>
                        </div>

                        <div class="text-danger"
                            *ngIf="repassword.invalid && (repassword.dirty || repassword.touched)">
                            <small class="login-val" *ngIf="repassword.errors['compare']"> Confirm password do not
                                match</small>
                        </div>

                    </div>
                </div>
</form>

When user type the text box, validation should be check. Do you know how to do this. I need to do this without any library.

Answer 1

Since you are not using reactive forms, you can directly perform a comparison between the models newPassword and repassword to set the error message. Please refer following stackblitz.

• Code: here
• Output: here