0
votes

Comment activer une zone de texte désactivée en cliquant sur un bouton en utilisant angulaire

J'ai une zone de texte qui est désactivée à l'aide d'une balise HTML désactivée simple.Je dois l'activer lorsque je clique sur le bouton d'activation, encore une fois, je dois la désactiver lorsque je clique sur le bouton de désactivation. Voici le code ci-dessous -

app.component.html

enable(){

}

disable(){

}

app.component.ts

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

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

angular html

0 commentaires

4 Réponses :

1
votes

Essayez comme ceci:

HTML:

enable(){
   this.isDisabled = false
}

disable(){
   this.isDisabled = true
}

TS:

isDisabled: boolean = false;

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

0 commentaires

0
votes

Cela pourrait être une approche:

<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>

De plus, disabled n'est pas une balise , est un attribut

0 commentaires

2
votes

Vous n'avez probablement pas besoin de TypeScript pour cela, vous pouvez référencer l'entrée à partir du modèle

<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>

0 commentaires

1
votes

HTML

export class pageName {
     public toggleButton: boolean = false;

     constructor(){}


    enable(){
       this.toggleButton = false
    }

    disable(){
       this.toggleButton = true
    }
}

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

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

0 commentaires