如何使用 JavaScript Angular 比較新密碼和確認密碼

Question

我需要比較下面的新密碼字段並確認密碼字段。 這是表格

    <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>

當用戶輸入文本框時，應檢查驗證。 你知道怎么做嗎。 我需要在沒有任何庫的情況下執行此操作。

Answer 1

由於您沒有使用反應式表單，您可以直接在模型 newPassword 和 repassword 之間進行比較以設置錯誤消息。 請參考以下stackblitz。

• 代碼： 這里
• 輸出：這里