Ionic 如何禁用离子输入?

0tdrvxhp  于 2022-12-16  发布在  Ionic
关注(0)|答案(4)|浏览(167)

如何禁用ion-input

<ion-input type="text"></ion-input>

我是Ionic Framework的新手,它与HTML非常相似,但没有属性来禁用它,如:
.prop("disabled", true)

vc6uscn9

vc6uscn91#

离子2:
1.静态特性:

<ion-input disabled="true" type="text"></ion-input>

1.动态:

<ion-input disabled="{{isDisabled}}" type="text"></ion-input>

在组件(.ts文件)中:

private isDisabled: boolean=false;
f87krz0w

f87krz0w2#

禁用小字符,它工作在布尔机制。绑定对象的真和假,所以你会得到的结果。

<ion-input disabled="{{inputDisabled}}" [(ngModel)]="drill_plus" placeholder="Drill Plus" type="number"></ion-input>

您的ts导出类

inputDisabled: boolean = false;

条件

this.inputDisabled = true;

对我很有效。试试这个,希望你能得到答案。

uyto3xhc

uyto3xhc3#

如果你想无条件禁用输入字段,你可以使用disabled指令,如下所示:

<ion-input type="text" placeholder="Enter Input" disabled></ion-input>

如果你想在某些情况下禁用输入字段,你可以在你的 typescript 文件中定义一个变量,并将它赋值给disabled指令,如下所示:

示例.ts:

专用已禁用:布尔值=假;

示例.html

<ion-input type="text" placeholder="Enter Input" [disabled]="isDisabled"></ion-input>

因此,如果isDisabled变量的值为真,则将禁用该变量,否则将启用该变量,用户可以输入他/她想要的任何内容。
希望它能在将来对一些人有所帮助。
谢谢

fkvaft9z

fkvaft9z4#

Disabled将使输入上的文本淡入淡出,但如果您仍希望像readonly模式一样显示文本,则可以尝试以下代码片段:

<ion-input type="email" readonly="{{isDisabled}}" [(ngModel)]="registerEmail" placeholder="abc@example.com"></ion-input>

输入仍将处于活动状态,但用户将无法编辑或更改输入上的内容。

相关问题