Question

我的要求是基于值将文本字段设置为只读。我尝试了两种方法，但都失败了。以下是我的代码。

使用ngClass

HTML代码

<input type="text" [ngClass]="{inputDisabled : data ? true:false}" id="req_name" value={{data.name}}
            name="req_name">

Css代码

.inputDisabled {
      pointer-events: none;
      opacity: 0.4;   }

使用只读

    <input [readonly]="data.name === ''? true:false" type="text" value={{data.name}} >
    or
    <input [readonly]="data=== ''? true:false" type="text"  value={{data.name}}>

data是我在组件中声明的变量。最初，在上述情况下，数据为null，那时我需要将textfield设为只读

Answer 1

在这里，您需要将data与undefined进行比较，以使条件为true，并且基于此条件您的输入字段将被禁用。

示例-

使用ngClass

<input type="text" [ngClass]="{'disabledDiv': !data }" 
    id="requestor_name" value={{data.name}}
    name="requestor_name">

使用readonly

<input [readonly]="!data" type="text"  value={{data.name}}>

希望这会有所帮助

Answer 2

这对我来说很好

<input type="text" [ngClass]="{disabledDiv: data ? false:true}" id="requestor_name" value={{data.name}}
            name="requestor_name">

Answer 3

我认为这些选项之一可能对您有用：

[readonly]="!data"

或

[class.inputDisabled]="!data"

无法将输入文本字段设置为只读角6

3 个答案: