How to disable an input field from typescript file [duplicate]

Question

This is my first angular project. Just started today. I have a form and I want to disable the input field.

This is my .html file below:

<div class="form-group">
<label for="projectTitle" class="label">Project Title</label>
    <input type="text" fullWidth id="projectTitle" value= 
    {{projectDetails.name}}" placeholder="Project Title">
</div>

How to disable the input from the .ts file?

I think he wants to know how to disable it from the typescript file, not only the html. In any case, you just bind disabled to a boolean in your ts file and if you want it to be disabled, you just set the boolean that way — DetectivePikachu
– DetectivePikachu, Commented Nov 11, 2019 at 14:53
Actually I don't know how to access the element in the html. How can I access that? — Deep
– Deep, Commented Nov 11, 2019 at 14:54

Zee · Accepted Answer · 2023-03-21 13:05:15Z

10

In HTML add conditional [disabled] attribute

<div class="form-group">
<label for="projectTitle" class="label">Project Title</label>
    <input type="text" fullWidth id="projectTitle" [value]="projectDetails.name" [disabled]="isEnabled" placeholder="Project Title">
</div>

Toggle it to true or false from .ts

this.isEnabled = false;

If it helped, consider upvoting to the answer, please.

edited Mar 21, 2023 at 13:05

answered Nov 11, 2019 at 14:52

Zee

4833 silver badges11 bronze badges

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

1 Comment

Deep Over a year ago

Thanks Mohd Zeeshan. It helped

Santosh Shinde · Accepted Answer · 2019-11-11 14:58:10Z

0

Template

<div class="form-group">
    <label for="projectTitle" class="label">Project Title</label>
        <input type="text" [attr.disabled]="isEnabled? '' : null" fullWidth id="projectTitle" value= 
        {{projectDetails.name}}" placeholder="Project Title">
    </div>

try component property instead of true to disable conditionally.

.ts
isEnabled:boolean = false;

edited Nov 11, 2019 at 14:58

answered Nov 11, 2019 at 14:53

Santosh Shinde

1,21210 silver badges18 bronze badges

1 Comment

Deep Over a year ago

And in the .ts file how to change it?

Majid Zohrabbeigi · Accepted Answer · 2019-11-11 14:57:22Z

-2

just add disabled tag to your input:

<input type="text" fullWidth id="projectTitle" value= 
    {{projectDetails.name}}" disabled placeholder="Project Title">

in jquery : disable:

$("#projectTitle").attr('disabled', 'disabled');

enable:

$("#projectTitle").removeAttr('disabled');

answered Nov 11, 2019 at 14:57

Majid Zohrabbeigi

5505 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to disable an input field from typescript file [duplicate]

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Linked

Related