2017-01-20 6 views
1

Ich habe Probleme mit Änderungen der Abmeldewerte im Formular, die ich für die Live-Validierung verwende. Meine Methode, die ich im exakten Fall ausschalten möchte:Angular2 unsubscribe valueÄnderungen in formGroup

this.taskForm.valueChanges.subscribe(data => { 
         ... 
       this.output = data; 
     }); 

Ich möchte diesen Listener nach dem Senden entfernen. Wie kann ich das machen? Ich habe versucht, unsubscribe zu verwenden, aber es hilft nicht. Unten ist mein Versuch:

this.sub = this.taskCreate.valueChanges.subscribe(data => { 
          ... 
       this.output = data; 
     }); 

und ich versuchte this.sub.unsubscribe(); hinzuzufügen, aber es half nicht.

onSubmit(form: FormGroup) { 
    let context: number = 0; 

    if(form.valid) { 
     this.appService.addTask(form.value) 
      .then(result => { 
       this.lgModal.hide(); 
       this.taskCreate.reset({ priority: '' }); 
       this.cartBox.cart = []; 
       this.cartBox.showCart = false; 
       this.createTaskDone.emit(); 
       this.attachments.attachmentList = []; 
       this.uploader.clearQueue(); 
       this.reloadContent.emit(context); 
       this.counter += 1; 
       console.log("COUNTER: ", this.counter); 

      })} 
    else { 
     this.formValidator(form); 

    } 

} 

formValidator(form:FormGroup) { 
    if(!form.controls['goal'].valid) this.formValid.goalErr = 1; else this.formValid.goalErr = 0; 
    if(!form.controls['priority'].valid) this.formValid.priorityErr = 1; else this.formValid.priorityErr = 0; 
    if(!form.controls['note'].valid) this.formValid.noteErr = 1; else this.formValid.noteErr = 0; 

    this.taskCreate.valueChanges.subscribe(data => { 
     this.formValidator(form); 
     this.output = data; 
    }); 
} 
+2

Das Problem muss woanders sein. 'unsubscribe()' funktioniert so. Können Sie bitte mehr Kontext für den von Ihnen gestellten Code bereitstellen? Wo und wie heißt dieser Code? –

+0

Hallo Gunter! Ich habe mehr Informationen in der Beschreibung hinzugefügt. Genau rufe ich Validator an, wenn Benutzer ungültiges Formular einreichen möchte. Dann führt dieser Validator valueChanges subscrient aus, der alle Formularfelder prüft und Änderungen erkennt. Wenn das Feld ungültig ist, wird die Beschriftung mit den Validierungsinformationen angezeigt. beim ersten Lauf funktioniert es ok, aber knifflige Sache ist, wenn ich das nächste Formular senden möchte. In diesem Fall funktioniert valueChanges seit dem Öffnen des Formulars, nicht wenn der Benutzer ein ungültiges Formular senden möchte. –

+0

Nirgendwo in diesem Code zeigen Sie entweder: 1. wo Sie sich abmelden wollten; oder 2. was genau du meinst * hilft nicht *. – jonrsharpe

Antwort

3

Abonnieren von valueChanges innen formValidator scheint mir falsch

formValidator(form:FormGroup) { 
    if(!form.controls['goal'].valid) this.formValid.goalErr = 1; else this.formValid.goalErr = 0; 
    if(!form.controls['priority'].valid) this.formValid.priorityErr = 1; else this.formValid.priorityErr = 0; 
    if(!form.controls['note'].valid) this.formValid.noteErr = 1; else this.formValid.noteErr = 0; 

    this.taskCreate.valueChanges.subscribe(data => { 
     this.formValidator(form); 
     this.output = data; 
    }); 
} 

Ich gehe davon aus würde, was Sie eigentlich wollen

this.sub = this.taskCreate.valueChanges.subscribe(data => { 
    this.formValidator(form); 
    this.output = data; 
}); 

knapp unter dem Code, der this.taskCreate initialisiert zu bewegen ist und dann Rufen Sie in onSubmit den this.sub.unsubscribe() Anruf an.

Ich nehme an, Ihr Problem ist, dass this.taskCreate.valueChanges.subscribe( mehrere Zeit aufgerufen wird und wenn Sie this.sub = this.taskCreate.valueChanges.subscribe( vorherige Abonnements werden von neuen überschrieben und kann nicht abgemeldet werden, weil die Referenz verloren ist.

+0

Ok Ich hatte den Code neu erstellt, du hattest diesen Code sux, aber das ist eine sehr alte App in der Entwicklungsphase, und jetzt lösche ich sie und füge neue Features hinzu. Was ist der richtige Weg für einen guten Wert changes subscribe unter einer Variablen, die ich durch abmelden() deaktivieren kann? Im Fall [form] = "taskForm". Ich frage, denn jetzt, wenn ich erkläre: this_ = this.taskCreate.valueChanges.subscribe (... Ich hatte keinen Zugang für die Abmeldung() -Methode :(unter this –

+0

Schwer zu sagen, was ist ein guter Ort, ohne es zu wissen was "setzt" Ihren Code hat. Wie erwähnt. Ich würde diesen Code direkt nach dem Code setzen, der 'this.taskCreate' initialisiert. –

+1

Ok ich getan wie Sie sagten, im Konstruktor lasse ich this.sub = taskCreate.valueChanges .subscribe (data => { this.formValidator (this.taskCreate); this.output = data; }); auf offene Form Methode hinzugefügt I this.sub.unsubscribe(), und nach dem Senden, wenn Validator ist rief ich nochmal sub an :) Danke nochmal! –

Verwandte Themen