如何使用 ngIf 条件禁用输入框？答案

【问题标题】：How to disable the input box using the ngIf condition?如何使用 ngIf 条件禁用输入框？
【发布时间】：2019-05-09 17:19:06
【问题描述】：

<input pInputText type="text" formControlName="description" class="form-control" placeholder="Required" *ngIf="pageModes[formModel.schema.mode] === pageModes[pageModes.View] />

上面是我使用的输入框.. 我的情况：

IF(pageModes[formModel.schema.mode] === pageModes[pageModes.View])
{
    -----------(disable the input box)-------------------
}
ELSE
{
    -----------(enable the input box)-------------------
}

当我简单地使用条件 pageModes[formModel.schema.mode] === pageModes[pageModes.View] 时，输入框变得不可见。

谁能帮我使用条件"pageModes[formModel.schema.mode] === pageModes[pageModes.View]"

禁用输入框

【问题讨论】：

您需要在您的 TypeScript 代码中禁用相应的 FormControl：angular.io/api/forms/AbstractControl#disable
当我使用这个时，输入变得不可见.. 我需要禁用输入
Disable input based on a condition的可能重复

标签： angular angular6 angular7

【解决方案1】：

您可以改用[disabled]="*** your condition ***"。输入元素上的每个 html 属性都可以使用[attribute] 进行绑定。

在你的情况下，这将是：

<input pInputText 
    type="text" 
    formControlName="description" 
    class="form-control" 
    placeholder="Required" 
    [disabled]="pageModes[formModel.schema.mode] === pageModes[pageModes.View] />

您也可以使用formControlName 并在控制器中设置为禁用。

【讨论】：

我有多个条件。只有在“pageModes[formModel.schema.mode] === pageModes[pageModes.View]”条件发生时，才需要禁用功能。当我使用您所说的条件时，它会影响所有条件。
感谢您的回复.. 我使用 [attr.disabled] = "pageModes[formModel.schema.mode] === pageModes[pageModes.View] ? 'disabled' : null"..现在它的工作
不客气。我们可以一起学习更多，所以我很乐意提供帮助。不过，您不需要使用 attr.disabled 。禁用应该足够了。随意接受或赞成答案:)

【解决方案2】：

删除您的*ngIf 并将禁用添加到您的formControl：

// Whereever you're building your form:
description: new FormControl({value: '', disabled: pageModes[formModel.schema.mode] === pageModes[pageModes.View]})

【讨论】：

你能给我一个演示吗？？

【解决方案3】：

将 inputDisabled 属性添加到您的组件中

export class Component{
   get inputDisabled(){
    return // add your disable logic here 
   }
}

将此属性设置为输入属性

<input [disabled]="inputDisabled"  .../>

【讨论】：