按钮根据条件禁用和启用按钮

Question

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> 

Answer 1

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

Answer 2

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