Question

我是angular 4的新手，并尝试实现自定义验证程序以检查newpassword和确认密码是否相同。但是我得到了＃34;无法读取属性＆＃39; passwordshouldMatch＆＃39; of null＆＃34;在ChangePassowrd.html文件中。你能告诉我哪里出错吗

change-password.component.html content -

<form [formGroup]="cp_form">
<div class="form-group">
    <label for="">Old Password</label>
    <input type="text" name="oldpassword" formControlName="oldPassword" class="form-control" required>
    <div class="alert alert-danger" *ngIf="oldpassowrod.touched && oldpassowrod.invalid">
        <div *ngIf="oldpassowrod.errors.required">
            Old password is required.
        </div>
        <div *ngIf="oldpassowrod.errors.notValidOldPassword">
            Please enter valid old password.
        </div>            
    </div>
</div>
<div class="form-group">
    <label for="">New Password</label>
    <input type="text" name="newpassword" formControlName="newPassword" class="form-control">
    <div class="alert alert-danger" *ngIf="newpassowrd.touched && newpassowrd.invalid">
        <div *ngIf="newpassowrd.errors.required">
            New password is required.
        </div>
    </div>      
</div>
<div class="form-group">
    <label for="">Confirm Password</label>
    <input type="text" name="confirmpassword" formControlName="confirmPassword" class="form-control">
    <div class="alert alert-danger" *ngIf="confirmpassowrd.touched && confirmpassowrd.invalid">
        <div *ngIf="confirmpassowrd.errors.required">
            Confirm password is required.
        </div>
    </div>
    <div class="alert alert-danger" *ngIf="cp_form.errors.passwordshouldMatch && cp_form.invalid">
        Password sholud match.
    </div>      
</div>      
<div class="form-group">
    <button type="submit" class="btn btn-primary">Submit</button>
</div>

change-password.component.ts -

import { Component, OnInit } from '@angular/core';
import { FormsModule, FormBuilder, Validators, ReactiveFormsModule, 
ValidationErrors, FormGroup } from '@angular/forms';
import { passwordValidators} from './password.validators';


@Component({
selector: 'change-password',
templateUrl: './change-password.component.html',
styleUrls: ['./change-password.component.css']})

export class ChangePasswordComponent  {

cp_form:FormGroup;      
constructor(fb:FormBuilder) { 
this.cp_form= fb.group({
    oldPassword:['', Validators.required, 
    passwordValidators.validOldPassword],
    newPassword:['', Validators.required],
    confirmPassword:['', Validators.required],
    }, {
        validator:passwordValidators.PasswordShouldMatch
    });}

   get oldpassowrod () {
    return this.cp_form.get('oldPassword');
   }

   get newpassowrd () {
    return this.cp_form.get('newPassword');
   }

   get confirmpassowrd () {
    return this.cp_form.get('confirmPassword');
   }

}

password.validators.ts

import { ReactiveFormsModule, ValidationErrors} from '@angular/forms';
import { AbstractControl } from '@angular/forms'

export class passwordValidators {
 static validOldPassword ( control:AbstractControl) {
    return new Promise ((resolve) => {
        if(control.value != '1234') {
            resolve ({ notValidOldPassword :true});
        }
        else {
            resolve(null);
        }
    });
}

 static PasswordShouldMatch ( control:AbstractControl) {
    let newpassword = control.get('newPassword');
    let confirmpassword = control.get('confirmPassword');

    if (newpassword.value != confirmpassword.value) {
        return { passwordshouldMatch :true}
    }
    else {
        return null
     }
  }
}

Answer 1

你可以试试这个：

change-password.component.ts -

this.cp_form= fb.group({
    oldPassword:['', Validators.required, 
    passwordValidators.validOldPassword],
    newPassword:['', Validators.required],
    confirmPassword:['', Validators.required],
    }, {
        validator:passwordValidators.PasswordShouldMatch('newPassword', 'confirmPassword')
    });}

password.validators.ts

static PasswordShouldMatch ( firstControlName, secondControlName) {
return (AC: AbstractControl) => {
      let firstControlValue = AC.get(firstControlName).value; // to get value in input tag
      let secondControlValue = AC.get(secondControlName).value; // to get value in input tag
      if (firstControlValue != secondControlValue) {
        return { passwordshouldMatch :true}
      } else {
        return null
      }
    };

在你的HTML中：

<div class="alert alert-danger" *ngIf="cp_form.errors?.passwordshouldMatch && cp_form.invalid">
    Password sholud match.
</div>

在角度4 - 自定义验证器中为新密码和确认密码给出＆＃34;无法读取null的属性＆＃34;错误

1 个答案: