Wie setValidators zu FormGroup nach seiner Initialisierung

Habe ich diese FormGroup

defaultIdNumberValidator = [Validators.required, Validators.minLength(6),
    Validators.maxLength(11)];

this.registerForm = this.formBuilder.group({ 
  permissions: this.formBuilder.group({
    country: ['', [Validators.required]],
    identityNumber: [null, this.defaultIdNumberValidator],
  }, {validator: [this.validateId]}) 
});

und ich möchte zu löschen und hinzufügen von Prüfungen auf identityNumber abhängig von einigen Bedingungen, die in this.validateId Methode.

validateId(input: AbstractControl) {
  if(condition) {
    input.get("identityNumber").clearValidators(); //this is working
  }
  if(condition) {
    input.get("identityNumber").setValidators(this.defaultIdNumberValidator); //not working
  }
}

Wenn setValidators Methode wird aufgerufen, ich bekomme diese Fehlermeldung (Zeile :109 ist die Linie, wo setValidators genannt wird)

ERROR TypeError: Cannot read property 'defaultIdNumberValidator' of undefined
    at RegisterComponent.validateId (register.component.ts:109)
    at eval (forms.js:742)
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:742)
    at eval (forms.js:694)
    at eval (forms.js:742)
    at Array.map (<anonymous>)
    at _executeValidators (forms.js:742)
    at eval (forms.js:694)
    at eval (forms.js:742)

UPDATE:

Ich neu starten, Entwicklungs-server und jetzt bekomme ich diesen Fehler

ERROR TypeError: Cannot read property 'setValidators' of undefined
at RegisterComponent.validateId (register.component.ts:109)
at eval (forms.js:742)
at Array.map (<anonymous>)
at _executeValidators (forms.js:742)
at eval (forms.js:694)
at eval (forms.js:742)
at Array.map (<anonymous>)
at _executeValidators (forms.js:742)
at eval (forms.js:694)

UPDATE 2:

Ich einfache plunker zum reproduzieren des Fehlers. Wenn Sie zuerst klicken Sie auf Eingabe und klicken Sie irgendwo sonst bekommen Sie Fehler unter ihm. Also dieser Fehler sollte entfernt werden, wenn die Länge des input-Wert >= 2, und sollte wieder sichtbar sein, wenn ist >= 5. Ich weiß auch nicht, warum der Fehler verschwinden, wenn die Länge des input-Wert ist 3 und nicht 2...

  • Können Sie erstellen eine plunkr? Hat Ihr validateId Methode sitzen in einem separaten ts-Datei?
  • Sie sind offensichtlich verlieren die Referenz auf "dieses' irgendwo
  • Siehe update. Ich werde versuchen, erstellen Sie eine plunkr
  • Ich erstelle plunker. Siehe update 2.
InformationsquelleAutor Domen Jakofčič | 2017-12-18
  1. 6

    Müssen Sie bind(this) zu halten, den Zusammenhang von this. Auch müssen Sie updateValueAndValidity für die änderung der Validierer aktualisiert werden. Dort müssen wir auch nicht emittieren ein Ereignis, wenn Sie waren, würde dies den Fall, looping, bis Ihr browser-Abstürze. So ändern Sie die folgenden:

    }, {validator: this.validateId.bind(this)})

    und der validator würde wie folgt Aussehen:

    validateId(input: AbstractControl) {
  //...
  if(...) {
    input.get("identityNumber").clearValidators();
    input.get("identityNumber").updateValueAndValidity({emitEvent:false, onlySelf:true});
  }
  if(...) {
    input.get("identityNumber").setValidators(this.defaultIdNumberValidator);
    input.get("identityNumber").updateValueAndValidity({emitEvent:false, onlySelf:true});
  }
}

    Ihre PLUNKER

    InformationsquelleAutor AJT82
Schreibe einen Kommentar