Angular反应形式异步操作

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

的工作版本