Angular2取消订阅formGroup上的valueChanges

Question

I have issue with unsubscribe values changes on form, which I use to live validation. My method which I want to turn off in precise case:

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

I want to remove this listener after submit. How can I do this? I've tried to use unsubscribe but it doesn't help. Below is my try:

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

and I tried to add this.sub.unsubscribe(); , but it didn't help.

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;
    });
}

Answer 1

Subscribing to valueChanges inside formValidator seems wrong to me

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;
    });
}

I'd assume what you actually want is to move

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

just below the code that initializes this.taskCreate and then in onSubmit do the this.sub.unsubscribe() call.

I assume your problem is that this.taskCreate.valueChanges.subscribe( is called multiple time and if you use this.sub = this.taskCreate.valueChanges.subscribe( previous subscriptions will be overridden by new ones and can't be unsubscribed to because the reference is lost.