I have a text box which is disabled using simple disabled html tag.I need to enable it when I click enable button, again I need to disable it when click disable button. Here is the code below -
<input type="text" disabled value="Sample text box">
<button (click)="enable()" type="button">Enable</button>
<button (click)="disable()" type="button">Disable</button>
enable(){
}
disable(){
}
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
}
}
You probably don't need TypeScript for this, you can reference the input from within the template
<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>
Try like this:
HTML:
<input type="text" [disabled]="isDisabled" value="Sample text box">
TS:
isDisabled:boolean = false;
enable(){
this.isDisabled = false
}
disable(){
this.isDisabled = true
}
This could be one approach:
<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>
Also, disabled is not a tag, is an attribute
