反應表單上的自定義驗證器用於密碼並確認密碼匹配將未定義的參數導入 Angular 4

Question

我正在嘗試實現一個自定義驗證器來檢查密碼和密碼確認是否相等。 問題是驗證器正在獲取未定義的密碼和確認密碼參數。 我如何使這項工作。 該函數有效，因為如果我將條件更改為 === 而不是 !== 它會在字段相同時正確拋出錯誤。 有誰知道這里的錯誤是什么？

signup.component.html

<div class="col-md-7 col-md-offset-1 col-sm-7">
  <div class="block">
    <div class="well">
        <form (onSubmit)="onSubmit()" [formGroup]="signUpForm">
          <div class="form-group">
            <label for="username" class="control-label">Nombre de usuario:</label>
            <input type="text" class="form-control" formControlName="username"  title="Please enter your username" placeholder="username">
            <p class="help-block" *ngIf="signUpForm.get('username').hasError('required') && signUpForm.get('username').touched">El nombre de usuario es obligatorio</p>
            <p class="help-block" *ngIf="signUpForm.get('username').hasError('minlength') && signUpForm.get('username').touched">El nombre de usuario debe tener al menos 6 caracteres</p>
            <p class="help-block" *ngIf="signUpForm.get('username').hasError('maxlength') && signUpForm.get('username').touched">El nombre de usuario debe tener menos de 15 caracteres</p>
          </div>
          <div class="form-group">
            <label for="email" class="control-label">E-mail:</label>
            <input class="form-control" formControlName="email" title="Please enter your email" placeholder="example@gmail.com">
            <p class="help-block" *ngIf="signUpForm.get('email').hasError('required') && signUpForm.get('email').touched">La dirección de email es obligatoria</p>
            <p class="help-block" *ngIf="signUpForm.get('email').hasError('email') && signUpForm.get('email').touched">Debe ingresar una dirección de correo válida</p>
          </div>
          <div class="form-group">
            <label for="password" class="control-label">Contraseña:</label>
            <input type="password" class="form-control" formControlName="password" title="Please enter your password" [(ngModel)]="password">
            <p class="help-block" *ngIf="signUpForm.get('password').hasError('required') && signUpForm.get('password').touched">Debe ingresar una contraseña</p>
          </div>
          <div class="form-group">
            <label for="confirmedPassword" class="control-label">Confirmar Contraseña:</label>
            <input type="password" class="form-control" formControlName="confirmedPassword"  title="Please re-enter your password" [(ngModel)]="confirmedPassword">
            <p class="help-block" *ngIf="signUpForm.get('confirmedPassword').hasError('required') && signUpForm.get('confirmedPassword').touched">La confirmación de contraseña no puede estar vacía</p>
            <p class="help-block" *ngIf="signUpForm.get('confirmedPassword').hasError('passwordMismatch') && signUpForm.get('confirmedPassword').touched">Las contraseñas no coinciden</p>
          </div>
          <button type="submit" class="btn btn-success" [disabled]="!signUpForm.valid">Registrarse</button>
          <a routerLink="/signin" class="btn btn-default" style="">Ya tenes usuario? Logueate</a> {{ creationMessage }}
        </form>

      </div>

  </div>
</div>

注冊組件.ts

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { CustomValidators } from '../../shared/custom-validators';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.sass']
})
export class SignupComponent implements OnInit {

  signUpForm: FormGroup;
  user = {
    username: '',
    email: '',
    password: ''
  };
  submitted = false;
  @Input() password='';
  @Input() confirmedPassword='';

  constructor() { }

  ngOnInit() {

    this.signUpForm = new FormGroup({
      'username': new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(15)]),
      'email': new FormControl(null, [Validators.required, Validators.email, Validators.minLength(5)]),
      'password': new FormControl(null, [Validators.required]),
      'confirmedPassword': new FormControl(null, [Validators.required, CustomValidators.passwordsMatch(this.password,this.confirmedPassword).bind(this)])
    });
  }

  onSubmit() {
    if (this.signUpForm.valid) {
      console.log(this.signUpForm.value);
    }
  }

}

自定義驗證器.ts

    import { FormControl } from '@angular/forms';

    export class CustomValidators{

    public static passwordsMatch(password: string, confirmedPassword: string) {

     return (control: FormControl) : { [s: string]: boolean } =>{
       //getting undefined values for both variables
       console.log(password,confirmedPassword);
        //if I change this condition to === it throws the error if the 
//  two fields are the same, so this part works
        if (password !== confirmedPassword) {
          return { 'passwordMismatch': true }
        } else {
          //it always gets here no matter what
          return null;
        }
    }
      }


    }

Answer 1

導入 {AbstractControl, FormBuilder, FormGroup, Validators} 從

將您的密碼輸入到組中，無需使用“ngModel”。

<div class="form-group row" formGroupName="passwords">
  <div class="form-group">
     <label for="password" class="control-label">Contraseña:</label>
     <input type="password" class="form-control" formControlName="password" title="Please enter your password">
     <p class="help-block" *ngIf="signUpForm.get('password').hasError('required') && signUpForm.get('password').touched">Debe ingresar una contraseña</p>
  </div>
  <div class="form-group">
     <label for="confirmedPassword" class="control-label">Confirmar Contraseña:</label>
     <input type="password" class="form-control" formControlName="confirmedPassword"  title="Please re-enter your password">
     <p class="help-block" *ngIf="signUpForm.get('confirmedPassword').hasError('required') && signUpForm.get('confirmedPassword').touched">Password must be required</p>
     <p class="help-block" *ngIf="signUpForm.get('confirmedPassword').hasError('passwordMismatch') && signUpForm.get('confirmedPassword').touched">password does not match</p>
  </div>

     buildForm(): void {
            this.userForm = this.formBuilder.group({
                passwords: this.formBuilder.group({
                    password: ['', [Validators.required]],
                    confirm_password: ['', [Validators.required]],
                }, {validator: this.passwordConfirming}),

            });
        }

添加此自定義功能以驗證密碼和確認密碼

  passwordConfirming(c: AbstractControl): { invalid: boolean } {
    if (c.get('password').value !== c.get('confirm_password').value) {
        return {invalid: true};
    }
}

密碼不匹配時顯示錯誤

<div style='color:#ff7355' *ngIf="userForm.get(['passwords','password']).value != userForm.get(['passwords','confirm_password']).value && userForm.get(['passwords','confirm_password']).value != null">
  Password does not match</div>

Answer 2

問題是您將反應式表單模塊與輸入方法混合在一起。 這會導致您在將值傳遞給驗證器時變得undefined 。

使用響應式表單時，您不需要綁定到ng-model 。 相反，您應該從FormGroup的實例中訪問字段的值。

我在應用程序中做這樣的事情來驗證密碼是否匹配。

public Credentials: FormGroup;

ngOnInit() {
    this.Credentials = new FormGroup({});
    this.Credentials.addControl('Password', new FormControl('', [Validators.required]));
    this.Credentials.addControl('Confirmation', new FormControl(
        '', [Validators.compose(
            [Validators.required, this.validateAreEqual.bind(this)]
        )]
    ));
}

private validateAreEqual(fieldControl: FormControl) {
    return fieldControl.value === this.Credentials.get("Password").value ? null : {
        NotEqual: true
    };
}

請注意，驗證器需要一個FormControl字段作為參數，並將該字段的值與Credentials FormGroup的Password字段的值進行比較。

在HTML中確保刪除ng-model 。

<input type="password" class="form-control" formControlName="confirmedPassword"  title="Please re-enter your password" >
<!-- AND -->
<input type="password" class="form-control" formControlName="password" title="Please enter your password">

希望這可以幫助！

Answer 3

有兩種類型的驗證器： FormGroup 驗證器和FormControl 驗證器。 要驗證兩個密碼是否匹配，您必須添加一個 FormGroup 驗證器。 下面是我的例子：

注意：this.fb 是注入的 FormBuilder

this.newAccountForm = this.fb.group(
  {
    newPassword: ['', [Validators.required, Validators.minLength(6)]],
    repeatNewPassword: ['', [Validators.required, Validators.minLength(6)]],
  }, 
  {validator: this.passwordMatchValidator}
);

passwordMatchValidator(frm: FormGroup) {
  return frm.controls['newPassword'].value === frm.controls['repeatNewPassword'].value ? null : {'mismatch': true};
}

在寺廟里：

<div class="invalid-feedback" *ngIf="newAccountForm.errors?.mismatch && (newAccountForm.controls['repeatNewPassword'].dirty || newAccountForm.controls['repeatNewPassword'].touched)">
  Passwords don't match.
</div>

這里的重點是將 FormGroup 驗證器作為第二個參數添加到 group 方法中。

Answer 4

請在 Angular5 中更新 FormGroup 代碼，如下所示

 this.signUpForm = new FormGroup({
      'username': new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(15)]),
      'email': new FormControl(null, [Validators.required, Validators.email, Validators.minLength(5)]),
      'password': new FormControl(null, [Validators.required]),
      'confirmedPassword': new FormControl(null, [Validators.required])
    }, this.pwdMatchValidator);

在組件中添加pwdMatchValidator函數

pwdMatchValidator(frm: FormGroup) {
    return frm.get('password').value === frm.get('confirmedPassword').value
       ? null : {'mismatch': true};
 }

在模板中添加驗證消息

<span *ngIf="confirmedPassword.errors || signUpForm .errors?.mismatch">
              Password doesn't match
            </span>

請找到下面的角材料工作組件。

組件模板代碼password.component.html

 <form class="cahnge-pwd-form" (ngSubmit)="onSubmit()" name="passwordForm" [formGroup]="passwordForm" #formDir="ngForm">
      <div fxLayout='column'>
    <mat-form-field>
      <input matInput name="password" placeholder="Password" [type]="hide ? 'text' : 'password'" formControlName="password" required>
      <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
      <mat-error *ngIf="password.invalid && (password.dirty || password.touched || isSubmit)">
        <span *ngIf="password.errors.required">
          Please enter a Password.
        </span>
        <span *ngIf="password.errors.maxlength">
          Please enter a Email no more than 16 characters.
        </span>
        <span *ngIf="password.errors.minlength">
          Please enter a password at least 6 characters.
        </span>
      </mat-error>
    </mat-form-field>
    <mat-form-field>
      <input matInput name="password" placeholder="Confirm Password" [type]="confirm_hide ? 'text' : 'password'" formControlName="confirm_password"
        required>
      <mat-icon matSuffix (click)="confirm_hide = !confirm_hide">{{confirm_hide ? 'visibility_off' : 'visibility'}}</mat-icon>
      <mat-error *ngIf="(confirm_password.invalid && (confirm_password.dirty || confirm_password.touched || isSubmit) || passwordForm.errors?.mismatch)">
        <span *ngIf="confirm_password.errors || passwordForm.errors?.mismatch">
          Password doesn't match
        </span>
      </mat-error>
    </mat-form-field>
    <div fxLayout='row' fxLayoutGap="10px">
      <button type="submit" mat-raised-button color="primary">Submit</button>
      <button type="button" (click)="formDir.resetForm(passwordForm)" mat-raised-button color="warn">Cancel</button>
    </div>
  </div>
</form>

組件代碼： password.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { PasswordService } from './password.service';
import { PasswordValidation  } from './confirm';

@Component({
  selector: 'app-password',
  templateUrl: './password.component.html',
  styleUrls: ['./password.component.css']
})
export class PasswordComponent implements OnInit {
  passwordForm: FormGroup;
  isSubmit: boolean;
  constructor(private router: Router, private passwordService: PasswordService, private toastrService: ToastrService, private route: ActivatedRoute) { }
  ngOnInit() {
    this.passwordForm = new FormGroup({
      'password': new FormControl('', [
        Validators.required,
        Validators.minLength(6),
        Validators.maxLength(16),
      ]),
      'confirm_password': new FormControl('', [
         Validators.required,
        Validators.minLength(6),
        Validators.maxLength(16),
      ]),
    }, this.pwdMatchValidator);

  }
 pwdMatchValidator(frm: FormGroup) {
    return frm.get('password').value === frm.get('confirm_password').value
       ? null : {'mismatch': true};
 }

  get password() { return this.passwordForm.get('password'); }
  get confirm_password() { return this.passwordForm.get('confirm_password'); }

  onSubmit(formvalue):boolean {
    this.isSubmit = true;
    if (this.passwordForm.invalid) {
      return false;
    } else {
      this.passwordService.updatePassword(this.passwordForm.value)
      .subscribe((res) => {
        if (res.status == 'success') {
          this.toastrService.success(res.msg);
          this.router.navigate(['/change-password']);
        }
      })
      return true;
    }

  }

}

Answer 5

我會做與Shailesh Ladumor相同的操作，但在返回驗證函數之前添加以下行：

c.get('confirm_password').setErrors({'noMatch': true});

因此驗證函數如下所示：

passwordConfirming(c: AbstractControl): { invalid: boolean } {
    if (c.get('password').value !== c.get('confirm_password').value) {
        c.get('confirm_password').setErrors({'noMatch': true});
        return {invalid: true};
    }
}

這不僅會將洞userForm設置為無效的表單組，還會將confirm_password設置為無效的表單控件。

有了這個，您以后可以在模板中調用以下函數：

public getPasswordConfirmationErrorMessage() {
if (this.userForm.get('confirm_password').hasError('required')) {
  return 'You must retype your password';
} else if (this.userForm.get('confirm_password').hasError('noMatch')) {
  return 'Passwords do not match';
} else {
  return '';
}

}

Answer 6

當您需要對多個字段進行驗證，並且希望在表單創建時聲明驗證器時，必須使用FormGroup 驗證器。 表單驗證器的主要問題是它將錯誤附加到表單而不是驗證控件，這導致模板中的一些不一致。 這是可重用的表單驗證器，它將錯誤附加到表單和控件

// in validators.ts file

export function controlsEqual(
  controlName: string,
  equalToName: string,
  errorKey: string = controlName // here you can customize validation error key 
) {

  return (form: FormGroup) => {
    const control = form.get(controlName);

    if (control.value !== form.get(equalToName).value) {
      control.setErrors({ [errorKey]: true });
      return {
        [errorKey]: true
      }
    } else {
      control.setErrors(null);
      return null
    }
  }
}

// then you can use it like
  ngOnInit() {
    this.vmForm = this.fb.group({
      username: ['', [Validators.required, Validators.email]],
      password: ['', [
        Validators.required,
        Validators.pattern('[\\w\\d]+'),
        Validators.minLength(8)]],
      confirm: [''], // no need for any validators here
    }, { 
        // here we attach our form validator
        validators: controlsEqual('confirm', 'password')
      });
  }

Answer 7

this.myForm = this.fb.group({
    userEmail: [null, [Validators.required, Validators.email]],
    pwd: [null, [Validators.required, Validators.minLength(8)]],
    pwdConfirm: [null, [Validators.required]],
}, {validator: this.pwdConfirming('pwd', 'pwdConfirm')});



pwdConfirming(key: string, confirmationKey: string) {
    return (group: FormGroup) => {
        const input = group.controls[key];
        const confirmationInput = group.controls[confirmationKey];
        return confirmationInput.setErrors(
            input.value !== confirmationInput.value ? {notEquivalent: true} : null
        );
    };
}

Answer 8

只想補充。 我使用 Reactive 表單，因此很容易在表單上使用訂閱 valueChanges 進行自定義驗證

this.registrationForm.valueChanges.subscribe(frm => {
  const password = frm.password;
  const confirm = frm.confirmPassword;
  if (password !== confirm) {
    this.registrationForm.get('confirmPassword').setErrors({ notMatched: true });
  }
  else {
    this.registrationForm.get('confirmPassword').setErrors(null);
  }
});

}

Answer 9

當您創建驗證器時，您將傳入password和confirmedPassword的值，但這些值的更改不會反映在驗證器中。

我看到的兩個選項是：

1. 在FormGroup上定義您的驗證器，並從您要比較的兩個控件中查找值； 或者
2. 由於您已經綁定到this ，請在驗證器中使用this.password和this.confirmedPassword 。

Answer 10

只是為了多樣性，我添加了另一種方法來做到這一點。 基本上，我創建了一個簡單的自定義驗證器，它采用原始控件（第一個輸入的字段）並使用重新輸入控件（第二個控件）檢查它的值。

import { AbstractControl, ValidatorFn } from "@angular/forms";

export abstract class ReEnterValidation {
   static reEnterValidation(originalControl: AbstractControl): ValidatorFn {
       return (control: AbstractControl): { [s: string]: boolean } => {
           if (control.value != originalControl.value) {
               return { 'reentry': true };
           }
       };
   }
}

您可以在創建新表單控件時設置此驗證器：

control1 = new FormControl('', ReEnterValidation.reEnterValidation(control2));

或者，您可以在之后設置它：

control.setValidators(ReEnterValidation.reEnterValidation(this._newPinControl));
control.updateValueAndValidity();

在視圖中，您可以顯示以下錯誤：

<!-- Confirm pin validation -->
<div *ngIf="control2.invalid && (control2.dirty || control2.touched)">
    <div *ngIf="control2.errors.reentry">
        The re-entered password doesn't match. Please try again.
    </div>
</div>

Answer 11

const form = new FormGroup({
  password: new FormControl('', Validators.minLength(2)),
  passwordConfirm: new FormControl('', Validators.minLength(2)),
}, passwordMatchValidator);

function passwordMatchValidator(g: FormGroup) {
   return g.get('password').value === g.get('passwordCenter code hereonfirm').value
      ? null : {'mismatch': true};
}

必須創建新服務，並且您可以在要驗證密碼和確認字段時調用創建的服務。