Question

当我尝试建立一个反应式表单来创建新的密码表单时遇到了这个错误。我已经在下面提到了源代码，并且当我删除源代码部分时没有错误，但是没有我的操作不是也一样我认为我必须在源代码中添加或删除某些内容才能获得所需的输出

main.ts:12 TypeError: Cannot read property 'value' of null
    at FormGroup.passwordShouldMatch [as validator] (password.validators.ts:18)
    at FormGroup._runValidator (forms.js:4089)
    at FormGroup.updateValueAndValidity (forms.js:4050)
    at new FormGroup (forms.js:4927)
    at FormBuilder.group (forms.js:8924)
    at new ChangePasswordComponent (change-password.component.ts:15)
    at createClass (core.js:31987)
    at createDirectiveInstance (core.js:31807)
    at createViewNodes (core.js:44210)
    at callViewAction (core.js:44660)






  static passwordShouldMatch(control : AbstractControl) {
        let newPassword = control.get('newPassowrd');
        let confirmPassword = control.get('confirmPassowrd');

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

                return null;
        }
    }

Answer 1

由于您未添加任何代码段，因此我认为您的表单结构是这样的。

this.fb.group({
  newPassowrd: [''],
  confirmPassowrd: [''],
});

在这里，您包括一个名为passwordShouldMatch的自定义验证功能，此功能看起来不错。因此，我假设将验证器设置为该表单组时您做错了事。

this.fb.group({
  newPassowrd: [''],
  confirmPassowrd: [''],
}, { validator: this.passwordShouldMatch});

这是应该为表单组设置验证功能的方式。在html中，您的表单应该是这样的。

<form [formGroup]="form" novalidate (ngSubmit)="onSubmit(survey)">
    <input type="text" placeholder="Untitled form" formControlName="newPassowrd">
    <input type="text" placeholder="Untitled form" formControlName="confirmPassowrd">
    <span *ngIf="form.hasError('passwordShouldMatch')">not match</span>
</form>

一切都应以这种方式工作。这是stackblitz

的工作版本

Angular反应形式异步操作

1 个答案: