Conditionally disable button based on reactive form or input state

Question

I have a reactive form trainingFeedbackForm with a textarea:

<textarea pInputTextarea appWhiteSpace inputField="{{not_attended_reason}}"
    [(ngModel)]="not_attended_reason" [disabled]="attended==='yes'"
    placeholder="The reason for not attending the traning"
    (inputValue)="removeWhitespace($event)"></textarea>

I want to disable this button when either the form is valid or the textarea is empty:

<button (click)="getFeedbackFormValue()" class="btn-gradient fill-btn ripple"
    [disabled]="trainingFeedbackForm.invalid || !not_attended_reason">
    Submit feedback
</button>

The approach I am using above is not working.

How can I achieve this? Can somebody help?

Does this answer your question? [Disable input on angular form](https://stackoverflow.com/questions/55569844/disable-input-on-angular-form) — Ashish Ratan, Feb 13 '20 at 13:20

Vijay Prajapati · Answer 1 · 2020-02-13T13:38:37.383

component.html in Replace disabled="checkDisbled()" this

add required in <textarea required>

<button (click)="getFeedbackFormValue()" class="btn-gradient fill-btn ripple"
                disabled="checkDisbled()">
                Submit feedback
              </button>

Add in Component.ts file

checkDisbled(){
  if(this.trainingFeedbackForm.invalid){ // <- add number of validation
  return true;
  }
  else {
  return false;
  }
}

Omar · Answer 2 · 2020-02-13T13:52:57.920

0

This should do the trick, just added !trainingFeedbackForm.invalid

<button (click)="getFeedbackFormValue()" class="btn-gradient fill-btn ripple"
[disabled]="!trainingFeedbackForm.invalid">
Submit feedback
</button>

Also, make sure that you add Validators.required to each form in your .ts

edited Feb 13 '20 at 13:52

answered Feb 13 '20 at 13:37

Omar

212
6
17

Conditionally disable button based on reactive form or input state

2 Answers2