[ANGULAR] Angular2 템플릿 구동 비동기 유효성 검사기

Angular2 템플릿 구동 비동기 유효성 검사기

해결법

1. ---

   1.NG_ASYNC_VALDATORS 키가 아니라 NG_VALIDATORSONE (동기 유효성 검사기 만 해당)이 아닌 비동기 유효성 검사기의 공급자를 등록하려고 할 수 있습니다.

   NG_ASYNC_VALDATORS 키가 아니라 NG_VALIDATORSONE (동기 유효성 검사기 만 해당)이 아닌 비동기 유효성 검사기의 공급자를 등록하려고 할 수 있습니다.

   @Directive({
     selector: '[asyncEmailValidator]',
     providers: [
       provide(NG_ASYNC_VALIDATORS, { // <------------
         useExisting: EmailValidator, multi: true
       }),
       AccountService
     ]
   })
   export class EmailValidator implements Validator {
     constructor(private accountService:AccountService) {
     }
   
     validate(c:Control) {
       return new Promise(resolve =>
         this.accountService.getUserNames(c.value).subscribe(res => {
           if (res == true) {
               resolve(null);
           }
           else {
               resolve({validateEmailTaken: {valid: false}});
           }
       }));
     }
   }
   

   Angular.io 웹 사이트 에서이 문서를 참조하십시오.

2. ---

   2.그 이후 구문이 바뀌 었음을 주목할 가치가있는 가치가 있으며, 이제는 Angular 4를 사용하고 재 작성 아래에 있습니다.

   그 이후 구문이 바뀌 었음을 주목할 가치가있는 가치가 있으며, 이제는 Angular 4를 사용하고 재 작성 아래에 있습니다.

   import { Directive, forwardRef } from '@angular/core';
   import { AbstractControl, Validator, NG_ASYNC_VALIDATORS } from '@angular/forms';
   import { AccountService } from 'account.service';
   
   @Directive({
       selector: '[asyncEmailValidator]',
       providers: [
           {
               provide: NG_ASYNC_VALIDATORS,
               useExisting: forwardRef(() => EmailValidatorDirective), multi: true
           },
       ]
   })
   export class EmailValidatorDirective implements Validator {
       constructor(private _accountService: AccountService) {
       }
   
       validate(c: AbstractControl) {
           return new Promise(resolve =>
               this._accountService.isEmailExists(c.value).subscribe(res => {
                   if (res == true) {
                       resolve({ validateEmailTaken: { valid: false } });
                   }
                   else {
                       resolve(null);
                   }
               }));
       }
   }
   

3. ---

   3.사용자 서비스를 사용하여 검증 된 사용자 지정 유효성 검사기를 올바르게 호출 할 수 있습니다. 내가 얻은 한 가지 문제는 validator.Compose () 안에 내 사용자 정의 유효성을 유지했습니다. 작성 기능을 꺼낸 후 모든 것이 작동합니다.

   사용자 서비스를 사용하여 검증 된 사용자 지정 유효성 검사기를 올바르게 호출 할 수 있습니다. 내가 얻은 한 가지 문제는 validator.Compose () 안에 내 사용자 정의 유효성을 유지했습니다. 작성 기능을 꺼낸 후 모든 것이 작동합니다.

   import { Directive } from '@angular/core';
   import { AsyncValidator, AbstractControl, ValidationErrors, NG_ASYNC_VALIDATORS, AsyncValidatorFn } from '@angular/forms';
   import { Observable } from 'rxjs';
   import { UserService } from '../Services/user.service';
   import { map } from 'rxjs/operators';
   
   export function UniqueUsernameValidator(userService: UserService): AsyncValidatorFn {
       return (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
   
           const q = new Promise((resolve, reject) => {
               setTimeout(() => {
                   userService.isUsernameTaken(control.value).subscribe((data: any) => {
                       // console.log('top: ' + data + ' type: ' + typeof data);
                       if (data === false) {
                           resolve(null);
                       } else {
                           resolve({
                               usernameTaken: {
                                   valid: true
                               }
                           });
                       }
                   }, () => {
                       resolve({
                           usernameTaken: {
                               valid: false
                           }
                       });
                   });
               }, 1000);
           });
   
           return q;
       };
   }
   
   @Directive({
       selector: '[appUniqueUsername]',
       providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: UniqueUsernameValidatorDirective, multi: true }, UserService]
   })
   export class UniqueUsernameValidatorDirective implements AsyncValidator {
       constructor(private userService: UserService) { }
   
       validate(control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
           return UniqueUsernameValidator(this.userService)(control);
       }
   
   }
   

from https://stackoverflow.com/questions/36235446/angular2-template-driven-async-validator by cc-by-sa and MIT license