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

Question

我有一个反应式表单，它在页面刷新时初始化，并根据与 ngModel 绑定的单选按钮上的状态禁用/启用，问题是反应式表单有另一组单选按钮、星级和 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>

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

<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 可以帮助我

Answer 1

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

这解决了

Answer 2

一种简单的禁用方法：

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

对于基于条件的禁用，您可以访问此博客
这是使用指令完成的

指示

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