CODEWITHSUNDEEP
javascriptangulartypescriptangular-reactive-forms
juhi
juhi

Reputation: 578

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

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

Upvotes: 0

Views: 1044

Answers (2)

juhi
juhi

Reputation: 578

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

this resolves

Upvotes: 1

Manish Patidar
Manish Patidar

Reputation: 804

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

Upvotes: 0

Related Questions