基于Angular 6反应形式的单选按钮禁用textarea答案

【问题标题】：Disable textarea on the basis of radio button in Angular 6 reactive form基于Angular 6反应形式的单选按钮禁用textarea
【发布时间】：2020-02-11 06:14:22
【问题描述】：

我有一个响应式表单，它在页面刷新时初始化，并根据与 ngModel 绑定的单选按钮上的状态禁用/启用，问题是反应式表单有另一组单选按钮，星级和文本区域。除文本区域外，所有内容都根据需要禁用

   <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>

现在，启用或禁用表单的单选按钮是：

<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>

它会根据需要禁用表单，但不会禁用文本区域有人可以帮我吗

【问题讨论】：

您是否在开发人员中检查过 disabled 属性是否应用于 textarea 元素？

标签： javascript angular typescript angular-reactive-forms

【解决方案1】：

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

解决了

【讨论】：

【解决方案2】：

一种简单的禁用方法：

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

对于基于条件的禁用，您可以visit this blog
这是使用指令完成的

指令

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>

这是另一个答案，也许对你有帮助

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

【讨论】：

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