angularngrxngrx-storengrx-effectsngrx-data

Button disable and enable button based on condition


I am trying to make the button enable when value return true. Even my function returns correct value but but not working as per my expectations.

This is my function:

  buttondisable() {​​​​​ 

    this.store.select(transcriptionSelector).pipe( 

      takeUntil(this.transcriptSubject) 

    ).subscribe(data => {​​​​​ 

      if (data.uiState === 'LOADED' || data.uiState === 'SAVED') {​​​​​ 

        if (data.text[0].status === 'Y') {​​​​​ 

           this.submitted = true; 

        }​​​​​ else {​​​​​ 

          this.submitted = false; 

        }​​​​​ 

      }​​​​​ 

      return this.submitted; 

    }​​​​​); 

  }​​​​​ 


HTML:

<button mat-raised-button color="accent" [disabled]="submitted? true: null" 
>{​​​​​{​​​​​transcriptButtonText}​​​​​}​​​​​</button> 

Solution

  • It wont work, because you are assigning Y to the submitted var.

    Try:

    if (data.text[0].status === 'Y') {​​​​​ 
      // this.submitted = data.text[0].status === 'Y'; 
      console.log( this.submitted); 
      this.submitted = true; 
    }​​​​​ else {​​​​​ 
      console.log(this.submitted); 
      this.submitted = false; 
    }​​​​​