Angular2: электронная почта уже существует как пользовательский валидатор?

Question

Я создал форму с Angular2, и я создал следующий метод, чтобы проверить, существует ли уже существующий адрес электронной почты. Вот мой код:

checkEmail(): void { 
    // FIRST PART 
    this.found = false; 
    // If user is not Premium... 
    if (!this.currentUser.isPremium) { 
     // ...and if user typed something in the input field, then apply validitor for email address 
     if (this.myForm.controls.email.value.length > 0) { 
      this.myForm.controls.email.setValidators([validateEmail()]); 
      this.myForm.controls.email.updateValueAndValidity(); 
     // If user leaves the input field blank or empty the typed input, then apply validator for required 
     } else { 
      this.myForm.controls.email.setValidators([Validators.required]); 
      this.myForm.controls.email.updateValueAndValidity(); 
     } 
    // If user is Premium... 
    } else if (this.currentUser.isPremium) { 
     // ...and if user typed something in the input field, then apply validitor for email address 
     if (this.myForm.controls.email.value.length > 0) { 
      this.myForm.controls.email.setValidators([validateEmail()]); 
      this.myForm.controls.email.updateValueAndValidity(); 
     // If user leaves the input field blank or empty the typed input, then remove any validator 
     } else { 
      this.myForm.controls.email.setValidators(null); 
      this.myForm.controls.email.updateValueAndValidity(); 
     } 
    } 

    // SECOND PART 
    // If the input field is valid then check if the email already exist on server... 
    if (this.myForm.controls.email.value.length > 0 && this.myForm.controls.email.valid) { 
     this.loadingIcon = true; 
     this.anagraficaService.getEmail(this.myForm.controls.email.value) 
      .then(response => { 
       let count = response.recordCount; 
       if (count > 0) { 
        this.found = true; 
       } else { 
        this.found = false; 
       } 
       this.loadingIcon = false; 
      }) 
      .catch(error => { 
       this.found = false; 
       this.loadingIcon = false; 
      }); 
    } 
} 

Чтобы включить кнопку Submit в файле шаблона, я проверяю для myForm.valid и found набор для false:

<button type="submit" class="ui primary button" (click)="onSubmit()" [disabled]="!myForm.valid || found">Submit</button> 

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

this.myForm.controls.email.setValidators([validateEmail(), checkEmailExists()]); 
this.myForm.controls.email.updateValueAndValidity(); 

У вас есть идея достичь тех же самых подтверждений? Любая лучшая практика по этой проблеме?

спасибо.

Answer 1

Ничего себе. Это далеко от идеи принятия реактивных форм.

Прежде всего не делают этого

this.myForm.controls.email.setValidators([validateEmail()]); 
this.myForm.controls.email.updateValueAndValidity(); 

setValidators и updateValueAndValidity являются функции вы должны почти никогда не называют. Они доступны только для некоторых конкретных случаев, таких как поведение динамической формы.

В вашем случае у вас есть статическая форма, которую вы должны просто описать с некоторыми валидаторами. Создайте настраиваемый асинхронный валидатор и назначьте его emailFormControl. Этот валидатор должен вернуть Observable (или Promise), который разрешает либо null, когда все в порядке, либо объекту с ошибкой, например. { emailAlreadyExists: true }, если существует электронная почта, { required: true } или используйте комбинацию из Validators.required и вашу пользовательскую асинхронную проверку.

В конце дня вы должны иметь

... 
public ngOnInit() { 
    this.myForm = new FormGroup({ 
    email: new FormControl('', null, (control: FormControl) => { 
     return new Promise((resolve, reject) => { 
     // also add here is premium logic 
     let requiredValidationResult = Validators.required(control); 

     if (requiredValidationResult) { 
      resolve(requiredValidationResult); // this will be {required: true} 
      return; 
     } 

     // and here call your server and call 
     // resolve(null) in case it's fine 
     // resolve({ emailExists: true }) in case it's existing 
     }); 
    }) 
    }); 
} 
... 

и это все.