Ошибка Angular 6: ожидается, что ValidatorFn вернет обещание - PullRequest
Новая
       12

Ошибка Angular 6: ожидается, что ValidatorFn вернет обещание

0 голосов
/ 04 декабря 2018

У меня проблема с тем, что функция валидатора ожидает возврата обещания.Насколько я понимаю, я создаю пользовательскую функцию проверки, которая проверяет, совпадает ли введенная строка «Новый пароль» со строкой «ConfirmPassword», используя обещание.Вот текущее состояние моего кода:

change-password.component.ts 

import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { passwordValidator } from './password.validator';

export class ChangePasswordComponent implements OnInit {

  form: FormGroup;

  constructor(formCreator: FormBuilder) { 

    this.form = formCreator.group({
    oldPassword: ['', [ Validators.required, Validators.minLength(4) ], passwordValidator.isSameOld],
    newPassword: ['', [ Validators.required, Validators.minLength(4)] ],
    confirmPassword: 
                 ['', [ Validators.required, Validators.minLength(4)], 
                        passwordValidator.isSameNew ] 
    });
  }

password.validator.ts

дополнения, сделанные с помощью Хайме 

    import { AbstractControl, ValidationErrors, FormControl, ValidatorFn } from "@angular/forms";

    static isSameNew(formFields: FormGroup) : Promise<ValidationErrors | null>{ 
        return new Promise((resolve, reject) => {

            setTimeout(() => {
                console.log(formFields.get('newPassword'));

                if (formFields.get('confirmPassword').value !== formFields.get('newPassword').value) {
                    console.log(formFields);

                    resolve({isSameNew: true});
                }

                else resolve(null);
            }, 2000)

        });
    }

Не могли бы вы помочь мне с отладкой?Я попытался передать newPassword в функцию, написав 

    confirmPassword: 
                 ['', [ Validators.required, Validators.minLength(4)], 
                        passwordValidator.isSameNew(newPassword) ]

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

Спасибо огромное за ваше время

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

Я решил эту проблему, вызвав корневой метод formFields, например, так: 

    static isSameNew(formFields: FormGroup) : Promise<ValidationErrors | null>{ 
    return new Promise((resolve, reject) => {

        setTimeout(() => {

            if (formFields.root.get('confirmPassword').value !== formFields.root.get('newPassword').value) {
                resolve({isSameNew: true});
            }

            else resolve(null);
        }, 2000)

    });

Я точно не знаю, почему использование «root» решило мою проблему, но, насколько я понимаю, каждая группа FormGroup знает своиэлементы родительской формы

0 голосов
/ 05 декабря 2018

Если вы хотите сравнить значения двух разных элементов управления, вам следует присоединить валидатор к группе вместо одного из элементов управления.

Попробуйте что-то вроде этого: 

  // Your component constructor:
  constructor(formCreator: FormBuilder) { 
    this.form = formCreator.group(
      {
        oldPassword: ['', [ Validators.required, Validators.minLength(4) ]],
        newPassword: ['', [ Validators.required, Validators.minLength(4)] ],
        confirmPassword: ['', [ Validators.required, Validators.minLength(4)], passwordValidator.isSameNew ] 
      },
      {
        validator: PasswordMatchValidator
      }
    );
  }

  // password-match.validator.ts:
  export function PasswordMatchValidator(formGroup: FormGroup): void {
    const newPassword = formGroup.get('newPassword').value;
    const confirmPassword = formGroup.get('confirmPassword').value;

    formGroup.get('confirmPassword').setErrors(undefined);

    if (newPassword !== confirmPassword) {
      formGroup.get('confirmPassword').setErrors({ match: true });
    }
  }

Вы можете использовать один и тот же подход для сравнения старого и нового пароля и соответственно установить isSameNew.

Также обратите внимание, что если вы хотите вернуть обещание, вы должны использовать AsyncValidatorFn интерфейс вместо ValidatorFn интерфейс.

...