How to change disabled attribute of input tag on button click using Angular 2

Question

I am trying to change the disabled attribute of the tag on a button click using Angular 2. So far I can disable it once, however I would like to toggle this function back and forth.

This is my code for my HTML template.

<div *ngIf = "hero">
            <h2> {{hero.name}} details! </h2>
            <button (click)="goBack()">Back </button> 
            <button (click)="edit()"> Edit </button>
            <button (click)="save()">Save </button>
            <div><label> Id: </label> {{hero.id}} </div> 
             <div>
                <label> Name: </label> 
                <input [(ngModel)] = "hero.name" placeholder = "name" 
               [disabled]="change" />
            </div>

        </div>

This is my code from my component

hero: Hero; 
editOn: boolean = true; 
change: string;     
edit(): string

{

if(this.editOn)
{
    this.editOn = false;
    this.change = "abled";
    console.log("Change propery status: ", this.change);
    return this.change;

}else if (!this.editOn)
{
     this.editOn = true; 
    this.change = "disabled";
     console.log("Change propery status: ", this.change);
    return this.change;

}

This is the browser of what I currently have with console.logs to show my property value is changing. Broswer Image

eko · Accepted Answer · 2017-06-13 13:34:17Z

1

The right hand side of the [disabled] directive needs to be a boolean value. Both "disabled" and "abled" are truthy values. Thus, it evaluates to [disabled]="true"

Example:

if(this.editOn)
{
    this.editOn = false;
    this.change = false;
    console.log("Change propery status: ", this.change);
    return this.change;

}else if (!this.editOn)
{
    this.editOn = true; 
    this.change = true;
    console.log("Change propery status: ", this.change);
    return this.change;

}

answered Jun 13, 2017 at 13:34

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Edward Muldrew Over a year ago

Thank you very much for your solution! This has helped a lot!

eko Over a year ago

@EdwardMuldrew Glad I could help :-)

Collectives™ on Stack Overflow

How to change disabled attribute of input tag on button click using Angular 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related