How to disable an input dynamically with Angular 7

Question

I'm trying to disable an input depending on the value taken from the Component.ts

In my component.ts file I have this value

disName = false;

And in my HTML I have these elements

Name: <input type="text"
             value="name"
             size="15"
             id="name"
             name="firstName"
             [(ngModel)]="aproverFirstName"
             [attr.disable]="disName=='true' ? true : null">

What looking for is that if my value on the component.ts is false, then in the html file the input element should change to disable depending on the value.

I've also tried this [disable]="disName"

I'm using Angular 7, thanks a lot!

Camila, disName is a boolean, so [attr.disable]="disName ? true : null"> (not put =='true') — Eliseo
– Eliseo, Commented Sep 30, 2019 at 7:18
I have this: [attr.disabled]="!inactive ? true : null" with inactive set as false in the TS file. I use a button to change the value. This works but not on the initial state. When I open page, my input field is editable, only when I change to true and back to false does it disable the field. Any idea how to change this? — Siobhan Holubicka
– Siobhan Holubicka, Commented Jun 22, 2021 at 6:19

Hoang Subin · Accepted Answer · 2019-09-30 02:14:26Z

You should do like this:

<input type="text"
             value="name"
             size="15"
             id="name"
             name="firstName"
             [(ngModel)]="aproverFirstName"
             [disabled]="disName">

But, I prefer to use @angular/forms in Angular, Then you can init the form like this:

HTML:

<input type="text"
                 value="name"
                 size="15"
                 id="name"
                 formControlName="firstName">

Typescript:

Init form:

this.sampleForm= this.fb.group({
      firstName: [{ value: '', disabled: true }, Validators.required]
});

Control enable and disable by:

this.sampleForm.controls.firstName.enable();
this.sampleForm.controls.firstName.disable();

jdgower · Accepted Answer · 2019-09-29 22:48:25Z

1

The attribute you're looking for is [disabled].

<input type="text" [disabled]="true" />

answered Sep 29, 2019 at 22:48

jdgower

1,18015 silver badges18 bronze badges

Comments

Andrews Felipe · Accepted Answer · 2019-10-03 20:56:19Z

-1

Try this

  <input type="text" [disabled]="!disName">

the condition has to be true.

Are you putting this "input" tag in component.html?

answered Oct 3, 2019 at 20:56

Andrews Felipe

797 bronze badges

Collectives™ on Stack Overflow

How to disable an input dynamically with Angular 7

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related