Validieren von E-Mail und Benutzer Angular2 fragt nach dem Server

Question

Ich habe die nächste Logik Validator, und ich möchte die Daten überprüfen, senden Sie es an den Server. Der Server antwortet gut, aber wenn ich versuche, einen Benutzer zu senden, kann ich das Formular senden. Vielen Dank. // Datei: E-Mail-Benutzer-validator.ts

interface IUsernameEmailValidator { 
    } 
function checkUser(control: Control, source: string) : Observable<IUsernameEmailValidator> { 

    // Manually inject Http 
    let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]); 
    let http = injector.get(Http); 
    let body; 
    if(source == 'email'){ 
    body = JSON.stringify({ email: control.value }) 
    }else if(source == 'username'){ 
    body = JSON.stringify({ username: control.value }); 
    } 

    return new Observable((obs: any) =>{ 
    if(!!control.valueChanges){ 
     control 
     .valueChanges 
     .debounceTime(400) 
     .flatMap(value => http.post('/user/check', body)) 
     .subscribe(
      value =>{ 
      obs.next(null); 
      obs.complete(); 
      }, 
      error => { 
      if(error.status == 500) return; 
      let msg = error.json().message; 
      obs.next({ msg: true }); 
      obs.complete(); 
      } 
     ) 
    } 
    }); 
} 
export class CustomValidators { 
    static checkUsername(control: Control) { 
    checkUser(control, 'username'); 
    } 

    static checkEmail(control: Control) { 
    checkUser(control, 'email'); 
    } 
} 

Die Komponente:

//File: main-component.ts 
ngOnInit(): any{ 
    this.registerForm = this._formBuilder.group({ 
     'email': ['', Validators.compose([Validators.required, CustomValidators.emailValidator])], 
     'password': ['', Validators.minLength(8)] 
    }) 
    } 

Server-Controller

check: (req, res) => { 
    let find = {}; 
    let email = false; 
    if(req.param('username')){ 
     find.username = req.param('username'); 
    }else if(req.param('email')){ 
     find.email = req.param('email'); 
     email = true; 
    } 
    User.findOne(find).exec((err, user) => { 
     if(err) return res.negotiate(err); 
     if(user && !email){ 
     return res.status(409).json({message: 'Username taken'}); 
     }else if(user && !!email){ 
     return res.status(409).json({message: 'Email taken'}) 
     } 
     // not taken 
     return res.status(200).json({message: !!user}); 
    }); 
} 

Answer 1

Dazu Sie eine asynchrone Validator global zu Ihrem Formular benötigen seit Es gilt sowohl für die E-Mail als auch das Passwort:

ngOnInit(): any{ 
    this.registerForm = this._formBuilder.group({ 
    'email': ['', 
     Validators.compose([Validators.required, CustomValidators.emailValidator]), 
     CustomValidators.checkUser], // <----- 
    'password': ['', Validators.minLength(8)] 
    }) 
} 

Für einen solchen Valdidator müssen Sie ein Versprechen zurückgeben, um zu benachrichtigen, wenn die Validierung erfolgreich oder fehlgeschlagen ist. In beiden Fällen müssen Sie das Versprechen lösen: wenn erfolgreich mit null, andernfalls mit einem Objekt, das dem Fehler entspricht.

Darüber hinaus können Sie den http als Parameter angeben, und Sie müssen sich nicht bei den valueChanges registrieren, da der Validator bei jedem Update ausgelöst wird.

function createCheckUser(http:Http) { 
    return function(control: Control) : Promise { 
    let body = JSON.stringify({ email: control.value }) 

    return new Promise((resolve: any) =>{ 
     http.post('/user/check', body)) 
     .subscribe(
      value =>{ 
      // If successful 
      resolve(null); 
      // If validation failed 
      //resolve({email:'The email...'}); 
      }, 
      error => { 
      resolve({email:'An error occurs'}); 
      } 
    ) 
    }); 
    }; 
} 

Hier ist der Weg, den Validator in diesem Fall zu konfigurieren:

ngOnInit(): any{ 
    this.registerForm = this._formBuilder.group({ 
    'email': ['', 
     Validators.compose([Validators.required, CustomValidators.emailValidator]), 
     CustomValidators.createCheckUser(this.http)], // <----- 
    'password': ['', Validators.minLength(8)] 
    }) 
} 

Siehe in diesem Artikel (siehe Abschnitt "Asynchronous Validierung für die Felder") für weitere Details:

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/