Angular 2 benutzerdefinierte Validierung nicht innerhalb der Komponente Funktion aufrufen

Question

Ich versuche, den doppelten Namen des Händlers mit benutzerdefinierten Validatoren zu finden. Die Händlernamensdaten stammen von Web-Service. Ich habe Händler-Service, um die Händlerdaten zu erhalten. Und ich benutze es für die Händlerduplikatvalidierung bei der Funktion validDelarName innerhalb der Komponente. Und ich erkläre es auf FromGroup Validators, aber es wird nicht aufgerufen.

Form Group Validator - declare 

name: ['', Validators.compose([Validators.required, Validators.maxLength(128),Validators.pattern('[a-zA-Z0-9\\s\\-\\,\\.\\&\\(\\)]+'),(control:FormControl)=>this.validDelarName])], 

Validierungsfunktion. Es ist auch in der Komponente vorhanden.

validDelarName(FormControl){ 
    const dealer = this.dealer.getviewdealer().subscribe(//getting data using webservices 
    (data) => {  
    data.forEach(items => { 
     for (var key in items) { 
     if (items.hasOwnProperty(key)) { 

      if(control.value == items['dealername']){ 
      return {valid:true;} 
      } 
      else{ 
      retrun null; 
      } 

     } 
     } 
    }); 
    } 

); 
} 

Answer 1

Zunächst einmal gibt es eine Menge Fehler in Ihrem Code, machen wir es aufzählen:

1 - Da Ihr validDelarName benutzerdefinierten Validator async ist, es muss als 3. gehen. Parameter, wie folgt aus:

name: [ 
    '', 
    [ 
    Validators.required, 
    Validators.maxLength(128), 
    Validators.pattern('[a-zA-Z0-9\\s\\-\\,\\.\\&\\(\\)]+') 
    ], 
    (control: AbstractControl) => this.validDelarName // Fix later 
] 

2 - Sie haben die Kontrolle oder die Kontext Ihrem benutzerdefinierten Validator, wie unten weitergeben müssen:

(control: AbstractControl) => this.validDelarName(control) 

oder wenn Sie es vorziehen:

this.validDelarName.bind(this) 

3 - Die validDelarName Unterschrift ist falsch, es muss so sein:

validDelarName(control: AbstractControl) { ... } 

4 - Der asyncValidator wartet oder ein Promise oder ein Observable und du bist nur null | errorObj innerhalb des forEach Rückkehr, die man nichts tut.

Lösung:

Statt subscribe Sie map Operator verwenden könnte (oder, wenn Sie möchten, dass Sie ein Versprechen verwenden können) und lassen Sie Angular tun, um seinen Job.

Um nach einem bestimmten Wert in Ihrem array zu suchen, empfehle ich Ihnen, Array#some zu verwenden. Es wird true zurückgegeben, wenn es den getippten Text im Array findet und die Schleife automatisch stoppt, andernfalls wird false zurückgegeben.

Auf dieser Basis können Sie den Fehler zurückobject oder null, wie folgt aus:

validDelarName(control: AbstractControl) { 
    return this.dealer.getviewdealer().map(data => { 
    const hasItem: boolean = data.some(item => control.value === item['dealername']); 

    return hasItem ? { valid: true } : null; 
    }); 
} 

5 - Wie Sie oben sehen können, müssen Sie alle nicht iterieren die Schlüssel dataObjekt (wie Sie), da Sie nur die dealername vergleichen möchten.

6 (Kleiner Fehler) - Sie haben einen Tippfehler in retrun null;, sollte return null; sein :).

7 (Credits @yurzui) - return {valid:true;} should be return { valid: true };

---

Tipps:

1 - Die Validators.compose nicht benötigt wird, können Sie nur eine array passieren, oder wenn es eine einzige Validator , der Validierer selbst, in beiden Parametern (2. und 3.).

2 - Validators.pattern akzeptiert eine RegExp, so dass Sie es verwenden können.

Warum? Anstatt die Symbole mit doppelten Schrägstrichen zu umgehen, können Sie nur einen einzigen Schrägstrich und IMO, es ist lesbarer zu entkommen.

Probe:

Validators.pattern(/^[a-zA-Z0-9\s-\,\.&\(\)]+$/) 

Beachten Sie auch, dass nicht alle Symbole hier zu entkommen muss (ich nehme das nicht benötigte Entkommen aus).

FULL DEMO