验证密码并确认密码 Ng2

Question

这是我的代码：

<form [formGroup]="registerForm" novalidate (ngSubmit)="doRegister()">
            <div 
                class="form-group" 
                [ngClass]="{'has-danger': registerForm.controls.email.invalid 
                    && !registerForm.controls.email.pristine}">
                <label>Email</label>
                <input
                  formControlName="email"
                  name="email"
                  [ngClass]="{'form-control-danger': registerForm.controls.email.invalid 
                    && !registerForm.controls.email.pristine}"
                  class="form-control"
                  type="email" />
            </div>
            <div 
                class="form-group"
                [ngClass]="{'has-danger': registerForm.controls.password.invalid 
                    && !registerForm.controls.password.pristine}">
                <label>Password</label>
                <input
                  class="form-control"
                  type="password"
                  formControlName="password"
                  name="password"
                  [ngClass]="{'form-control-danger': registerForm.controls.password.invalid 
                    && !registerForm.controls.password.pristine}" >
            </div>
            <div 
                class="form-group"
                [ngClass]="{'has-danger': registerForm.controls.passwordConfirm.invalid}" >
                <label>Password Confirm</label>
                <input
                  [ngClass]="{'form-control-danger': registerForm.controls.passwordConfirm.invalid}"
                  class="form-control"
                  type="password"
                  formControlName="passwordConfirm"
                  name="passwordConfirm" >
            </div>
            <button [disabled]="!registerForm.valid" class="btn btn-primary" type="submit">Register</button>
        </form>

以及表单初始化部分：

this.registerForm = this.formbuilder.group({
        email: ['', Validators.compose([Validators.required, validateEmail])],
        password: ['', Validators.compose([Validators.required, Validators.minLength(5)])],
        passwordConfirm: ['', ]
    })

现在我想验证密码和密码确认字段，但我不知道如何，我试图创建一个指令，但我无法将表单控件直接传递给它。谢谢。

编辑：

<div
                class="form-group"
                [ngClass]="{'has-danger': registerForm.controls.password.invalid
                    && !registerForm.controls.password.pristine}">
                <label>Password</label>
                <input
                  formControlName="password"
                  name="password"
                  class="form-control"
                  [ngClass]="{'form-control-danger': registerForm.controls.password.invalid
                    && !registerForm.controls.password.pristine}"
                  type="password"
                  validateEqual="registerForm.controls.passwordConfirm"
                  reverse="true" >
            </div>
            <div
                class="form-group"
                [ngClass]="{'has-danger': registerForm.controls.passwordConfirm.invalid}" >
                <label>Password Confirm</label>
                <input
                  formControlName="passwordConfirm"
                  name="passwordConfirm"
                  [ngClass]="{'form-control-danger': registerForm.controls.passwordConfirm.invalid}"
                  class="form-control"
                  type="password"
                  validateEqual="registerForm.controls.password" >
            </div>

它根本不起作用，没有错误。

Answer 1

对于使用validateEqual 指令，请在 HTML 下方使用：

<div class="form-group" [ngClass]="{'has-danger': registerForm.controls.password.invalid && !registerForm.controls.password.pristine}">
  <label>Password</label>
  <input formControlName="password" name="password" class="form-control" type="password" [ngClass]="{'form-control-danger': registerForm.controls.password.invalid && !registerForm.controls.password.pristine}" validateEqual="passwordConfirm" reverse="true" >
</div>
<div class="form-group" [ngClass]="{'has-danger': registerForm.controls.passwordConfirm.invalid}">
    <label>Password Confirm</label>
    <input formControlName="passwordConfirm" name="passwordConfirm" [ngClass]="{'form-control-danger': registerForm.controls.passwordConfirm.invalid}" class="form-control" type="password" validateEqual="password" >
</div>