Angular Реактивная форма асинхронной операции - PullRequest
Новая
       39

Angular Реактивная форма асинхронной операции

0 голосов
/ 04 марта 2020

Я получаю эту ошибку, когда пытаюсь создать реактивную форму для создания формы нового пароля. Я упомянул исходный код ниже, и когда я удаляю часть исходного кода, то ошибки не возникает, но без этого моя операция не выполняется. работает так же. Я думаю, что мне нужно добавить или удалить что-то в моем исходном коде, чтобы получить желаемый результат 

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;
        }
    }

1 Ответ

0 голосов
/ 04 марта 2020

Поскольку вы не добавили ни одного фрагмента кода, я считаю, что ваша структура формы выглядит примерно так: 

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

...