如何在Angular 5 app中禁用组件的输入

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

为input元素创建模板引用ValueJoiner<? super V,? super VO,? extends VR>并在组件文件中使用它。

#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文件中的input元素创建属性并设置ViewChild()

component.ts

disabled = true

编辑：

由于输入是动态生成的，因此正在获取每个元素的id。

以下应该有所帮助：

@ViewChild('inputEl') public inputEl: ElementRef; fun() { this.inputEl.nativeElement.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;
    }
  }   
}