Angular 2.x async validator probléma

Angular 2.x async validator probléma
2017-01-03T12:12:57+01:00
2017-01-03T20:47:57+01:00
2022-10-15T23:15:37+02:00
*deleted_51853486
Sziasztok!

Angular 2-ben (2.3.1) szeretnék megvalósítani egy custom validátort, ami async működne (promise).
A validátor egyszerűen megnézné, hogy regisztrálás során létezik-e a megadott user vagy sem. Ehhez 2 dolgot használok: egy komponenst és egy servicet.

A komponens így néz ki:

import { Component, OnInit } from '@angular/core'; import { FormControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { UserService } from '../shared/user.service' @Component({ selector: 'app-auth', providers: [], templateUrl: './auth.component.html', styleUrls: ['./auth.component.css'] }) export class AuthComponent implements OnInit { // Tabs for log in or sign up tab = 'signup'; // Sign up form signUpForm: FormGroup; // Log in form logInForm: FormGroup; constructor(private formBuilder: FormBuilder, private ussr: UserService) { this.signUpForm = this.formBuilder.group({ 'username': [null, [ Validators.required, Validators.minLength(4), Validators.maxLength(12), this.ussr.getUserNameFromServer ]], 'email': '', 'password': '' }); this.logInForm = this.formBuilder.group({ 'username': '', 'password': '' }); } ngOnInit() { } activeTab(tab: string) { this.tab = tab; } signUpSubmit(value: any) { console.log(value); } }
A service pedig így:

import { Injectable } from '@angular/core'; import { Http, Response, Headers, RequestOptions } from '@angular/http'; import { FormControl } from '@angular/forms'; import 'rxjs/add/operator/map'; @Injectable() export class UserService { constructor (private http: Http) {} private extractData (res: Response) { let body = res.json() return body || { } } getUserNameFromServer = (c: FormControl) => { return new Promise ( (resolve, reject) => { this.http.get('https://jsonplaceholder.typicode.com/users/1') .map(this.extractData) .subscribe( (res: any) => { if (c.value == res.username) { console.log('taken') resolve({'usernameTaken': true}) } else { console.log('ok') resolve(null) } }, err => { console.log(err) } ) } ); } }
Több példát is találtam a neten ami a fenti kódhoz hasonlóan műküdik, szóval a visszatért promiset csak beszúrják a validátorhoz, és elvileg ennyi. SO-n is találtam pár kérdést a témában, de miután a promise visszatér mindenkinek, az validálás jó.

Nekem miután a promise visszatér, ha létezik a user ha nem, mindenképp invalid lesz a form.
Mutasd a teljes hozzászólást!
A sync validatorokhoz raktad. Az async validatorokat a harmadik parameterben tudod megadni.

'username': [null, [ Validators.required, Validators.minLength(4), Validators.maxLength(12) ], [ this.ussr.getUserNameFromServer ] ],
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd