Button disable and enable button based on condition-CodePudding

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>

CodePudding user response：

  [disabled]="submitted? true: null"

can you try this?

CodePudding user response：

try this :

private buttondisable() {
this.store.select(transcriptionSelector).pipe(
  takeUntil(this.transcriptSubject)
).subscribe(data => {
      let flag = false;
      console.log(data);
      if (data.uiState === 'LOADED' || data.uiState === 'SAVED') {
        if (data.text[0].status === 'Y') {
          this.submitted = true;
          flag = true;
        } 
      }
      return flag;
    });

CodePudding user response：

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