如何从打字稿文件中禁用输入字段[重复]答案

【问题标题】：How to disable an input field from typescript file [duplicate]如何从打字稿文件中禁用输入字段[重复]
【发布时间】：2020-03-07 06:36:32
【问题描述】：

这是我的第一个 Angular 项目。今天才开始。我有一个表单，我想禁用输入字段。

这是我下面的.html 文件：

<div class="form-group">
<label for="projectTitle" class="label">Project Title</label>
    <input type="text" fullWidth id="projectTitle" value= 
    {{projectDetails.name}}" placeholder="Project Title">
</div>

如何从.ts 文件中禁用input？

【问题讨论】：

我想他想知道如何从打字稿文件中禁用它，而不仅仅是 html。在任何情况下，您只需将 disabled 绑定到 ts 文件中的布尔值，如果您希望禁用它，只需以这种方式设置布尔值
其实我不知道如何访问html中的元素。我怎样才能访问它？

标签： html angular typescript

【解决方案1】：

在 HTML 中添加条件 [disabled] 属性

<div class="form-group">
<label for="projectTitle" class="label">Project Title</label>
    <input type="text" fullWidth id="projectTitle" value= 
    {{projectDetails.name}}" [disabled]="isEnabled" placeholder="Project Title">
</div>

从 .ts 将其切换为 true 或 false

this.isEnabled = false;

【讨论】：

感谢 Mohd Zeeshan。它有帮助

【解决方案2】：

模板

<div class="form-group">
    <label for="projectTitle" class="label">Project Title</label>
        <input type="text" [attr.disabled]="isEnabled? '' : null" fullWidth id="projectTitle" value= 
        {{projectDetails.name}}" placeholder="Project Title">
    </div>

尝试使用组件属性而不是 true 来有条件地禁用。

.ts
isEnabled:boolean = false;

【讨论】：

而在.ts文件中怎么改呢？

【解决方案3】：

只需在您的输入中添加disabled 标签：

<input type="text" fullWidth id="projectTitle" value= 
    {{projectDetails.name}}" disabled placeholder="Project Title">

在 jquery 中：禁用：

$("#projectTitle").attr('disabled', 'disabled');

启用：

$("#projectTitle").removeAttr('disabled');

【讨论】：