подтвердите электронную форму и форму подтверждения пароля - PullRequest
0 голосов
/ 24 октября 2019

Привет, я пытаюсь проверить как электронную почту, так и подтверждение, пароль и пароль, подтвердить пароль

Не могли бы вы дать несколько советов. Я использую реактивную форму. У меня есть директива mustMatch, но она не работает, когда я закомментирую один из 2 методов проверки, например, для подтверждения электронной почты, тогда метод проверки пароля работает, но я не могу заставить их работать одновременно

я попытался поместить два свойства validtor, но это не сработало, из-за чего я получил ошибки

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

;}

проверка и подтверждение электронной почты, и подтверждение пароля

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...