Question

我正在学习Angular并创建了此更改密码反应形式，除了int matrizA[5][3], matrizB[5][3], matrizC[5][3]; for ( al=0; al<5; al++ ) for ( ac=0; ac<3; ac++ ) ...可以正常工作之外，passwordShouldMatch()检查newPass和confirmPass是否相等。

这是错误：
NewPassComponent.html:23 ERROR TypeError: Cannot read property 'valid' of undefined at Object.eval [as updateDirectives] (NewPassComponent.html:26)

这是pass.validator.ts

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

export class passValidator{
    static oldPassVal(control: AbstractControl): Promise < ValidationErrors | null> {
        return new Promise((resolve, reject)=> {
            if (control.value !== '1234')
                resolve({ oldPassVal: true});
            else 
                resolve (null);
        })
    }
    static passwordShouldMatch(control: AbstractControl) {
        let newPassword = control.get('newPass');
        let confirmPassword = control.get('confirmPass');

        if (newPassword.value !== confirmPassword.value)
            return { passwordsShouldMatch: true };

        return null;
    }


}

这是new-pass.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { passValidator } from './pass.validator';


@Component({
  selector: 'new-pass',
  templateUrl: './new-pass.component.html',
  styleUrls: ['./new-pass.component.scss']
})
export class NewPassComponent {
  form: FormGroup;
  constructor(fb: FormBuilder) {
    this.form = fb.group({
      oldPass: ['', 
        Validators.required, 
        passValidator.oldPassVal
      ],
      newPass: ['', Validators.required],
      confirmPass: ['', Validators.required]
    }, {
      validator: passValidator.passwordShouldMatch
    });
  }

这是模板：

<!-- New Password Input -->

    <label for="newPass">New password</label>
    <input  type="password" class="form-control" id="newPass" formControlName="newPass">

<!-- Errors Messages -->

    <div *ngIf="form.get('newPass').touched && form.get('newPass').invalid">
        <div *ngIf="form.get('newPass').errors.required" class="alert alert-danger">This field cannot be empty</div>
    </div>

<!-- Confirm Password Input-->

    <label for="confirmPass">Confirm password</label>
    <input type="password" class="form-control" id="confirmPass" formControlName="confirmPass">

<!-- Error Messages-->
    <div *ngIf="form.get('confirmPass').touched && form.get('confirmPass').invalid">
        <div *ngIf="form.get('confirmPass').errors.required" class="alert alert-danger">This field cannot be empty</div>
    </div>
    <div *ngIf="confirmPass.valid && form.invalid && form.errors.passwordShouldMatch">Passwords don't match</div>   

    <button class="btn btn-primary" type="submit">Change password</button>
</form>

Answer 1

我认为您需要像这样将confirmPass.valid更改为form.get('confirmPass').valid

<div *ngIf="form.get('confirmPass').valid && form.invalid && form.errors.passwordShouldMatch">Passwords don't match</div>

TypeError：无法读取未定义的属性“ touched”

1 个答案: