angular - 如何在 Angular 5 应用程序中禁用来自组件的输入
问题描述
我正在开发 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
解决方案
#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>
ViewChild()
使用组件 .ts 文件中的输入元素创建属性并设置disabled = true
组件.ts
@ViewChild('inputEl') public inputEl: ElementRef;
fun() {
this.inputEl.nativeElement.disabled = true;
}
编辑 :
由于输入是动态生成的,并且每个元素的 id 都被获取。
以下应该有帮助:
document.getElementById(questionAnswerProvidedState.QuestionId).setAttribute('disabled', 'true');
推荐阅读
- php - codeigniter 3 中的本机 php 会话“会话已经开始 - 忽略”
- python - Teradatasql Python:无法将命名参数传递到脚本中
- r - 使用 R 修改 word 文档
- css - 如何在没有“fa-icon”标签的情况下使用 fontawesome
- python - 如何修复 Jupyter 笔记本依赖项?ModuleNotFoundError:没有名为“boto3”的模块
- amazon-web-services - 指定的 VPC 不支持 DNS 解析和/或 DNS 主机名。更新 VPC,然后重试
- r - 为 Mac 创建便携式版本的 R(并为此版本从源安装包)
- javascript - 如何在 Selenium 中打开禁用的字段
- c - 重命名文件并将其另存为另一个文件
- smartcard - 如何计算智能卡上的数字签名?