How to disable an input field from typescript file

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, Nov 11 '19 at 14:53
Actually I don't know how to access the element in the html. How can I access that? — Deep, Nov 11 '19 at 14:54

Zee · Accepted Answer · 2023-03-21T13:05:15.173

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 '23 at 13:05

answered Nov 11 '19 at 14:52

Zee

483
3
10

1

Thanks Mohd Zeeshan. It helped – Deep Nov 11 '19 at 18:57

Santosh Shinde · Answer 2 · 2019-11-11T14:58:10.923

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 '19 at 14:58

answered Nov 11 '19 at 14:53

Santosh Shinde

1,206
10
16

And in the `.ts` file how to change it? – Deep Nov 11 '19 at 14:56

score -2 · Answer 3 · answered Nov 11 '19 at 14:57

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');

How to disable an input field from typescript file

3 Answers3