确认电子邮件和密码验证反应形式

Question

您好，我正在尝试同时验证电子邮件，confirmEmail和passowrd，confirmPassword

请给我一些建议。即时通讯使用反应形式。我有一个mustMatch指令，但是当我注释掉2个验证器方法之一（例如用于确认电子邮件）时，它似乎不起作用，然后密码验证器方法起作用了，但是我似乎无法使它们同时工作

我尝试放置两个验证器属性，但这没有给我带来错误

html

        <div class="form-group">
          <input
            type="text"
            formControlName="confirm"
            class="form-control"
            [ngClass]="{
              'is-invalid': submitted && (isEmailMismatch || f.confirm.errors)
            }"
            placeholder="confirm email"
          />

          <div
            *ngIf="submitted && (isEmailMismatch || f.confirm.errors)"
            class="invalid-feedback"
          >
            <div *ngIf="f.confirm.errors.required">
              Confirm Email is required
            </div>
            <div *ngIf="isEmailMismatch">Emails must match</div>
          </div>
        </div>

        <div class="form-group">
          <input
            [(ngModel)]="password"
            [type]="isTextFieldType ? 'text' : 'password'"
            formControlName="password"
            class="form-control"
            [ngClass]="{ 'is-invalid': submitted && f.password.errors }"
            placeholder="password"
          />

          <img
            class="eye-img pointer"
            id="dropdown-eye"
            src="../../../../assets/images/eye-gray.svg"
            alt="see password"
            (click)="togglePasswordFieldType()"
          />
          <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
            <div *ngIf="f.password.errors.required">Password is required</div>
            <div *ngIf="f.password.errors.minlength">
              Password must be at least 6 characters
            </div>
          </div>
        </div>
        <div class="form-group">
          <input
            [type]="isTextFieldType ? 'text' : 'password'"
            formControlName="confirmPassword"
            class="form-control"
            [ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }"
            placeholder="confirm password"
          />

          <img
            class="eye-img pointer"
            id="dropdown-eye"
            src="../../../../assets/images/eye-gray.svg"
            alt="see password"
            (click)="togglePasswordFieldType()"
          />
          <div
            *ngIf="submitted && f.confirmPassword.errors"
            class="invalid-feedback"
          >
            <div *ngIf="f.confirmPassword.errors.required">
              Confirm Password is required
            </div>
            <div *ngIf="f.confirmPassword.errors.mustMatch">
              Passwords must match
            </div>
          </div>
        </div>

ts

 this.registerForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      idNumber: ['', Validators.required],
      lastName: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      confirm: ['', [Validators.required, Validators.email]],
      contactNumber: ['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(6)]],
      confirmPassword: ['', Validators.required]
    },
      {
        validator: (form: FormGroup) => form.get('email').value !== form.get('confirm').value ? { emailMismatch: true } : null,

      },
      //   code for password validation
      //  {
      //       validator: MustMatch('password', 'confirmPassword')
      //     }
    );

  }

  // convenience getter for easy access to form fields
  get f() { return this.registerForm.controls; }
  get isEmailMismatch() { return this.registerForm.getError('emailMismatch')

; }

同时验证确认电子邮件和确认密码