如何启用禁用的文本框 onclick 使用角度的按钮

Posted 2023-02-24

【中文标题】如何启用禁用的文本框 onclick 使用角度的按钮

【英文标题】：How to enable a disabled text box onclick a button using angular

【发布时间】：2020-01-03 02:27:31

【问题描述】：

我有一个使用简单的禁用 html 标记禁用的文本框。我需要在单击启用按钮时启用它，再次单击禁用按钮时我需要禁用它。 这是下面的代码-

app.component.html

<input  type="text" disabled value="Sample text box">

<button (click)="enable()" type="button">Enable</button>
<button (click)="disable()" type="button">Disable</button>

app.component.ts

enable()



disable()

【参考方案1】：

试试这样：

HTML：

<input  type="text" [disabled]="isDisabled" value="Sample text box">

TS：

isDisabled:boolean = false;

enable()
   this.isDisabled = false


disable()
   this.isDisabled = true

【参考方案2】：

这可能是一种方法：

<input  type="text" [disabled]="isDisabled" value="Sample text box">

<button (click)="isDisabled = false" type="button">Enable</button>
<button (click)="isDisabled = true" type="button">Disable</button>

另外，disabled 不是标签，是attribute

【参考方案3】：

你可能不需要 TypeScript，你可以从模板中引用输入

<input #input type="text" disabled value="Sample text box">

<button (click)="input.disabled = false" type="button">Enable</button>
<button (click)="input.disabled = true" type="button">Disable</button>

【参考方案4】：

HTML

<input  type="text" [disabled]='toggleButton' value="Sample text box">

<button (click)="enable()" type="button">Enable</button>
<button (click)="disable()" type="button">Disable</button>

TS

export class pageName 
     public toggleButton: boolean = false;

     constructor()


    enable()
       this.toggleButton = false
    

    disable()
       this.toggleButton = true