How to disable an input FormControl in a Reactive Form with a condition in Angular 15?

Question

I have a form where I can input a student Id. Below that are two input boxes, full name and email. When I load the page, only the student Id input box should be enabled and the two inputs below it are disabled. When I enter the student Id and if it has a record, that's the only time that the input boxes for the full name and email are enabled.

When I used Angular 13, it was able to work with this for each input

[attr.disable]="!isStudentIdReal"

However, I recently updated to Angular 15 and this stopped working. I was able to find a solution where:

studentName : [{value: '', disable: true}],
email : [{value: '', disable: true}]

This disabled the input boxes however, it won't enable them because I don't have a condition.

Furthermore the Mathieu Rieger's answer, you can use a directive. See, e.g.[SO](https://stackoverflow.com/questions/52619826/to-enable-or-disable-the-input-field-based-on-the-value-of-select-component-in-a/52622123#52622123) — Eliseo, Jan 23 '23 at 14:43

score 3 · Accepted Answer · answered Jan 23 '23 at 12:41

3

There is a breaking change about that in angular 15.

You will need to import the ReactiveFormsModule with a config to restore the previous behavior:

ReactiveFormsModule.withConfig({callSetDisabledState: 'whenDisabledForLegacyCode'})

The other possibility being calling enable() on the FormControl when the value of isStudentIdReal changes.

answered Jan 23 '23 at 12:41

Matthieu Riegler

31,918
20
95
134

I'm sorry, I'm still fairly new to Angular. Where do I put ReactiveFormsModule.withConfig({callSetDisabledState: 'whenDisabledForLegacyCode'}) or how do I use it? – jo1718 Jan 23 '23 at 12:50
You replace `ReactiveFormsModule` where it's currently imported. Most likely your AppModule ! – Matthieu Riegler Jan 23 '23 at 12:52
https://imgur.com/a/uftUxKo is this where it's supposed to be? – jo1718 Jan 23 '23 at 14:39

score 1 · Answer 2 · answered Jan 23 '23 at 13:15

1

Try this:

use [disabled]="!isStudentIdReal"

answered Jan 23 '23 at 13:15

Yogita Katte

96
3

I also tried this and it still didn't work, unfortunately. – jo1718 Jan 23 '23 at 13:20
This is may lead to complex behaviours. The disabled input here refers to the HTMLInputElement disabled property, not the `FormControl` disabled. A consequence of using this is that the control may be enabled but the input disabled (hence if the user unlocks the `input` via devTools, it will pass the information to the `formControl`. Use this when using `FormsModule` aka the Template-driven approach and not with the `ReactiveFormsModule` aka the Reactive approach. – IDK4real Jan 23 '23 at 16:55

score 0 · Answer 3 · answered Jan 23 '23 at 17:49

Using the ReactiveForms approach in Angular, every FormControl has a set of properties and methods. The ones you are looking for would be disable() and enable().

You can call them directly in the component, not the template, through the FormGroup that contains your controls.

Let's say your FormGroup is called studentInfo. You could add to your component some getters to access directly those controls:

get studentName() {
  return this.studentInfo.get('studentName');
}

get studentEmail() {
  return this.studentInfo.get('email');
}

Then, inside the method that checks the student ID you could write something like this:

  // code that checks student id
  if (!isStudentIdReal) {
    this.studentName.disable();
    this.studentEmail.disable();
  } else {
    this.studentName.enable();
    this.studentEmail.enable();
  }
  // rest of the code

This code can be written more elegantly, but I hope it helps you get the gist.

score 0 · Answer 4 · edited Jun 25 '23 at 13:27

0

In your input tag in html:

[disabled]="!isStudentIdReal"

In your ts file:

enableOrDisable(){
  if(this.formgroupname.controls['id'].value){
    this.isStudentIdReal=true
  }else{
    this.isStudentIdReal=false
  }
}

call the above method in change of id input tag as well as in constructor or ngOnInIt.

edited Jun 25 '23 at 13:27

bvdb

22,839
10
110
123

answered Jan 24 '23 at 07:24

Muhammad Athaullah

25
3

Thanks @bvdb to edit the answer, unfortunately the answer is incorrect. – Eliseo Jun 25 '23 at 18:14
@Eliseo indeed it is. :-) but at least now we can read it. The answer of Matthieu Riegler is pretty good though. – bvdb Jun 25 '23 at 21:47

How to disable an input FormControl in a Reactive Form with a condition in Angular 15?

4 Answers4