[英]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.我有一个反应式表单,它在页面刷新时初始化,并根据与 ngModel 绑定的单选按钮上的状态禁用/启用,问题是反应式表单有另一组单选按钮、星级和 textarea。 Everything gets disabled as per demand except the textarea除 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它根据需要禁用表单,但不是 textarea 可以帮助我
this.trainingFeedbackForm.controls['feedback'].disable();
this.trainingFeedbackForm.controls['rating'].disable();
this resolves这解决了
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 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 https://stackoverflow.com/a/50220894/11004482
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.