Javascript 基于Angular 6被动形式的单选按钮禁用textarea

Javascript 基于Angular 6被动形式的单选按钮禁用textarea,javascript,angular,typescript,angular-reactive-forms,Javascript,Angular,Typescript,Angular Reactive Forms,我有一个被动表单,它在页面刷新时初始化,并根据与ngModel绑定的单选按钮上的状态禁用/启用,问题是被动表单有另一组单选按钮、星级和文本区域。除文本区域外,所有内容都将根据需要禁用 <div class="radio-selection"> <p-radioButton name="yes" value="yes" label="Yes" [(ngModel)]="attended" inputId="yes" (ngModelChange)="res

我有一个被动表单,它在页面刷新时初始化,并根据与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>

它根据需要禁用表单,但不禁用文本区域
有人能帮我做这件事吗

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


这里是另一个答案,可能对您有所帮助


这解决了

是否已签入开发人员检查
已禁用
属性是否应用于textarea元素?此.trainingFeedbackForm.controls['feedback'].disable();此.trainingFeedbackForm.controls['rating'].disable();
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 ) {
  }

}
<input class="form-control" placeholder="Name" name="name" formControlName="name" autocomplete="off" [disableControl]="isDisabled" required>
this.trainingFeedbackForm.controls['feedback'].disable();
this.trainingFeedbackForm.controls['rating'].disable();