How to make input field disable based on another input field

Question

How to make "passed out year" field disable if the degree is not typed. May I know can we achieve it in html without .ts file use.

  <div>  Degree:                    
  <input type="text" class="form-control" formControlName="degree" #degree/></div>

<div>
Passed Out Year
  <input type="text" class="form-control" formControlName="passedYear"/></div>

Alex Link · Accepted Answer · 2018-08-16 13:52:15Z

1

Add this [disabled]="!formName.controls['degree'].value" in case you want any value, or this [disabled]="!formName.controls['degree'].valid" in case you want passedyear to be entered correctly.

However, if you need to implement more complex checks you may want to add custom validators.

edited Aug 16, 2018 at 13:52

answered Aug 16, 2018 at 13:51

Alex Link

1,24013 silver badges16 bronze badges

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

2 Comments

canpan14 Over a year ago

you could even shorten it to degree.value i think because he has the #degree

Alex Link Over a year ago

sure, I also made a mistake, in case you want to disable 'passedYear' input, you have to check 'degree'

rayray · Accepted Answer · 2018-08-16 14:01:51Z

0

It's not clear exactly how you are planning to use this, but you may not need to use Angular Forms if you're doing something simple. In that case you can accomplish what you need by just using ngModel like this

<div> Degree:
    <input type="text" class="form-control" [(ngModel)]="degree" />
</div>

<div>
    Passed Out Year
    <input type="text" class="form-control" [disabled]="!degree" />
</div>

answered Aug 16, 2018 at 14:01

rayray

1,8551 gold badge12 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to make input field disable based on another input field

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related