如何在 Angular 5 应用程序中禁用来自组件的输入

Question

我正在处理 Angular 5 应用程序。我有反应形式，一切正常。现在我需要在用户单击复选框 true 时禁用输入。一切正常，我想知道如何禁用来自组件的输入。我成功获取了输入的 ID，但不确定接下来要做什么？？？

组件

private handleQuestionAnswerProvidedStateChange(questionAnswerProvidedState:QuestionAnswerProvidedStateDataModel)
{
  console.log(">>>>>>> questionAnswerProvidedStateEvent ",questionAnswerProvidedState);
  var elementReference = document.getElementById(questionAnswerProvidedState.QuestionId);
  console.log("elementReference ",elementReference);
}

模板

 <div *ngSwitchCase="'textbox'"> <small>textbox</small>
           <div class="form-group">
               <input *ngSwitchCase="'textbox'" 
                      [formControlName]="question.key" 
                      [id]="question.key" 
                      [type]="question.type"
                      [(ngModel)]="question.value" 
                      (keyup.enter)="onChangeValue($event, previousValue, responseId, question.key, 'textbox'); previousValue = question.value" 
                      (blur)="onChangeValue($event,  previousValue, responseId, question.key, 'textbox'); previousValue = question.value"
                      (focus)="previousValue=question.value"
                      >
           </div>            
       </div>

后面的文字是循环的，所以会有很多输入，每个输入都有唯一的id

Answer 1

为输入元素创建模板引用 #inputEl 并在组件文件中使用它。

<div class="form-group">
                   <input #inputEl
                          *ngSwitchCase="'textbox'" 
                          [formControlName]="question.key" 
                          [id]="question.key" 
                          [type]="question.type"
                          [(ngModel)]="question.value" 
                          (keyup.enter)="onChangeValue($event, previousValue, responseId, question.key, 'textbox'); previousValue = question.value" 
                          (blur)="onChangeValue($event,  previousValue, responseId, question.key, 'textbox'); previousValue = question.value"
                          (focus)="previousValue=question.value"
                          >
               </div>

在组件 .ts 文件中使用 ViewChild() 创建一个属性作为输入元素并设置 disabled = true

component.ts

@ViewChild('inputEl') public inputEl: ElementRef;

fun() {
  this.inputEl.nativeElement.disabled = true;
}

编辑：

由于输入是动态生成的，并且正在获取每个元素的 ID。

以下内容应该有所帮助：

document.getElementById(questionAnswerProvidedState.QuestionId).setAttribute('disabled', 'true');

Answer 2

得到答案....

private handleQuestionAnswerProvidedStateChange(questionAnswerProvidedState:QuestionAnswerProvidedStateDataModel)
{
  console.log(">>>>>>> questionAnswerProvidedStateEvent ",questionAnswerProvidedState);
  if(questionAnswerProvidedState!=null)
  {
    var elementReference = <HTMLInputElement> document.getElementById(questionAnswerProvidedState.QuestionId);
    if(questionAnswerProvidedState.AnswerNotProvided == true)
    {
      elementReference.disabled = true;
    }
    else if(questionAnswerProvidedState.AnswerNotProvided == false)
    {
      elementReference.disabled = false;
    }
  }   
}

如何在 Angular 5 应用程序中禁用来自组件的输入

how to disable input from component in Angular 5 app

angular

angular-reactive-forms

组件

模板