Disable textarea on the basis of radio button in Angular 6 reactive form

Question

I have a reactive form that is initialized on page refresh and get disabled/enabled on the basis of the state on the radio button which is bound with ngModel, the problem is the reactive form has another set of radio buttons, star rating and textarea. Everything gets disabled as per demand except the textarea

   <div class="radio-selection">
         <p-radioButton name="yes" value="yes" label="Yes" [(ngModel)]="attended" inputId="yes" (ngModelChange)="resetTextarea()">
         </p-radioButton>
         <p-radioButton name="no" value="no" label="No" [(ngModel)]="attended" inputId="no" (ngModelChange)="resetForm()">
         </p-radioButton>
    </div>

<div class="feedback-wrapper">

        <textarea pInputTextarea [(ngModel)]="not_attended_reason" [disabled]="attended==='yes'" placeholder="The reason for not attending the traning">
        </textarea>
        <form [formGroup]="trainingFeedbackForm" *ngIf="feedbackQuestions">
             <div formArrayName="feedback">
                 <ul class="questions">
                     <li class="list" *ngFor="let question of feedbackQuestions; index as i" [formGroupName]="i">
                           <div class="ques-title">{{question.text}}</div>
                           <div class="ques-desc">{{question.description}}</div>
                           <div *ngIf="question.type === feedbackQuestionTypeRef.Text; else mcq">
                           <textarea pInputTextarea formControlName="answer" [disabled]="attended==='no'"></textarea>
                            </div>
                            <ng-template #mcq>
                                 <p-radioButton *ngFor="let mcq of question.options" name={{question.id}} [disabled]="attended==='no'" label={{mcq.choice}} formControlName="answer" [value]="mcq.choice"></p-radioButton>
                            </ng-template>
                      </li>
                  </ul>
             </div>
             <div class="training-rating">
                 <div class="ques-title">Overall Rating</div>
                     <p-rating [cancel]="false" stars="5" formControlName="rating" [disabled]="attended==='no'"></p-rating>
             </div>
         </form>
    </div>

Now, the radio buttons which enable or disable the form are:

<p-radioButton name="yes" value="yes" label="Yes" [(ngModel)]="attended" inputId="yes" (ngModelChange)="resetTextarea()">
</p-radioButton>
<p-radioButton name="no" value="no" label="No" [(ngModel)]="attended" inputId="no" (ngModelChange)="resetForm()"></p-radioButton>

it disables the form as needed but not the textarea can someone help me in this

have you checked in developer inspect whether `disabled` attribute applied on the textarea element or not? — Pardeep Jain, Feb 11 '20 at 06:21

score 1 · Answer 1 · answered Feb 11 '20 at 09:53

1

this.trainingFeedbackForm.controls['feedback'].disable();
this.trainingFeedbackForm.controls['rating'].disable();

this resolves

answered Feb 11 '20 at 09:53

juhi

558
1
10
19

score 0 · Answer 2 · answered Feb 11 '20 at 06:26

A simple way to do disable :

<textarea disabled> 
     This textarea field is disabled. 
</textarea>

For condition-based disable you can visit this blog
which is done using directive

Directive

import { NgControl } from '@angular/forms';

@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {
  }

}

HTML

<input class="form-control" placeholder="Name" name="name" formControlName="name" autocomplete="off" [disableControl]="isDisabled" required>

Here is another answer maybe it helps you

https://stackoverflow.com/a/50220894/11004482

this.trainingFeedbackForm.controls['feedback'].disable(); this.trainingFeedbackForm.controls['rating'].disable(); — juhi, Feb 11 '20 at 09:52

Disable textarea on the basis of radio button in Angular 6 reactive form

2 Answers2