Angular Пользовательский валидатор делает форму недействительной

Question

Я очень стараюсь понять это и читаю много похожих проблем здесь, в stackoverflow, но ничего не помогло.

Я работаю на Angular 9 и пытаюсь реализовать настраиваемую проверку, которая проверяет asyn c, если адрес электронной почты уже существует. На первый взгляд кажется, что это работает, но при попытке отправить форму сообщает, что она недействительна. Но это становится действительно странным при проверке объекта FormGroup, в котором valid равно true.

Thats my is im init:

  ngOnInit(): void {
    this.validateForm = this.fb.group({
      academicTitle: [null],
      birthday: [null],
      firstName: [null, Validators.required],
      company: [null],
      lastName: [null, Validators.required],
      gender: [null],
      email: [null, [Validators.email, Validators.required], [this.emailValidator(this.http)]],
      password: [null, [Validators.required, Validators.minLength(6)]],
      password2: [null, [this.confirmPasswordValidator]],
      street: [null],
      zip: [null],
      city: [null],
      country: [null],
      role: [null, [Validators.required]],
    });
  }

Вот мой emailValidator

emailValidator(http: HttpClient): ValidatorFn  {
    return (control: AbstractControl) => {
      return http.get(serverConstants.serverUrl + 'user/checkEmail/' + control.value).pipe(map((res) => {
        if (res) {
          console.log('exists');
          return {
            error: true,
            duplicated: true
          };
        }
        console.log('NOT EXISTING');
        return null;
      }));
    };
  }

Здесь мой метод отправки, и, как вы можете видеть, я проверяю, чтобы каждое управление было действительным, а затем само формировалось. Он всегда выводит, что это недействительно в консоли, но фактический объект содержит valid = true.

submitForm() {
    for (const i in this.validateForm.controls) {
      this.validateForm.controls[i].markAsDirty();
      this.validateForm.controls[i].updateValueAndValidity();
      if (this.validateForm.controls[i].invalid) {
        console.log(i);
      }
    }
    console.log('is valid ? ' + this.validateForm.valid);
    console.log(this.validateForm);
    if (this.validateForm.valid) {
      this.saveUser();
    }
  }

Это вывод в консоли после заполнения всех необходимых полей и нажатия кнопки submit:

ОБНОВЛЕНИЕ:

Я решил, что форма имеет статус «ОЖИДАНИЕ» , и, похоже, она застряла на ней. Я тоже много читал об этом, но ни одно из исправлений не работает для меня или устарело.

Answer 1

Вероятно, вам следует реализовать AsyncValidatorFn , поскольку HTTP-запрос является асинхронным. На первый взгляд, мне кажется, что ваша форма недействительна, и становится действительной, когда вы проверяете свою консоль. Консоль Chrome оценивает значение объекта только при нажатии на него. Если вам нужно значение объекта точно в момент console.log, попробуйте console.log(JSON.stringify(this.validateForm))

Answer 2

Если вы проверяете несколько условий в реактивной форме, вам может потребоваться использовать Validators.compose следующим образом:

email: [null, Validators.compose ([Validators.email, Validators.required, this .emailValidator (this.http)])],