Angular 4 - Reactive Forms enable/disable not working

Question

I am having trouble enabling and disabling a form controls in my application. It is probably because the form is being enabled/disabled in an asynchronous context.

Here is how the code is.

user.component.html

<form [formGroup]="form">
    <input type="text" id="name" formControlName="name" />
    <input type="text" id="age" formControlName="age" />
</form>

user.component.ts

ngOnInit() {

     this._route.queryParams.subscribe(params => {
            getUser(params.userId).subscribe(user => {
                 this._buildForm(user);
            })
     });
}

private _buildForm(user){
    this.form = _fb.group({
        name: [{value: user.name, disabled: user.someCondition}, Validators.required],
        age: [{value: user.age, disabled: user.anotherCondition}, Validators.required]
    })
}

When the first time the user is loaded upon param change, the controls do get enabled/disabled on the basis of their relevant conditions. When the params change subsequently, the state of the controls remain the same although the values are set appropriately.

I have tried different ways to fix this but no help. For example, I have tried the following at the end of the _buildForm method.

this.form.disable() //Doesn't do anything

this.form.controls.name.disable(); //Doesn't help

One thing that does work as expected is the following (but this isn't what is required).

<button (click)="form.disable()" value="Disable Form" />
<button (click)="form.enable()" value="Enable Form" />

What I feel is that the problem is due the fact the _buildForm() is being called from the asynchronous context (subscribe method).

How can I fix this problem?

UPDATE

Please note that the Observable subscription is triggered on the basis of the navigation as below.

this._router.navigate([], {
   relativeTo: this._route,
   queryParams: {userId: 10}
})

UPDATE 2 https://angular-cvf1fp.stackblitz.io

This is an easier way to understand my problem

Not is clear to me. You're trying to disable the submit until all the inputs are completed? — Jonathan Brizio, Apr 26 '18 at 18:35
In your headline you've written *Angular 2*, haven't you @KashifNazar? — Michael W. Czechowski, Apr 26 '18 at 18:59
@MichaelCzechowski - That is just to distinguish from AngularJS. — Kashif Nazar, Apr 26 '18 at 19:02
@KashifNazar seems not a plunker, and for angular version I meant specific numbers, to be able to reproduce the issue (it might be bug and fixed in other versions) — Reza, Apr 26 '18 at 21:10
@KashifNazar Could you share the editor link for the StackBlitz? That way I can fork a fixed version for you? — JayChase, Apr 26 '18 at 23:26
@KashifNazar please update with link to editor not to example only — Antoniossss, Apr 28 '18 at 16:37
You can always try the same from sync context using ActivateRouteSnapshot — Antoniossss, Apr 28 '18 at 16:45

score 5 · Answer 1 · answered Apr 26 '18 at 19:00

5

You just need enable/disable methods of form control.

Here is stackblitz example. It works perfectly.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  group;
  isDisabled = true;

  constructor(fb: FormBuilder) {
    this.group = fb.group({
      stuff: fb.control({value: 'stuff', disabled: this.isDisabled})
    });
  }

  toggle() {
    this.isDisabled = !this.isDisabled;

    this.group.controls.stuff[this.isDisabled ? 'enable' : 'disable']();
  }
}

answered Apr 26 '18 at 19:00

Sharikov Vladislav

7,049
9
50
87

Thanks for the answer but the problem is that I am trying to toggle from the subscribe method. If I have a button in the UI, that can easily enable/disable the component. Let me try to modify the example. – Kashif Nazar Apr 26 '18 at 19:07
Do you have ChangeDetectionStrategy set up? – Sharikov Vladislav Apr 26 '18 at 19:10
No. I don't have – Kashif Nazar Apr 26 '18 at 19:12
I updated to the subscribe. It works. Even with ChangeDetectionStrategy.OnPush. – Sharikov Vladislav Apr 26 '18 at 19:13
Ok then just provide repro on stackblitz. We will fix it easily then. – Sharikov Vladislav Apr 26 '18 at 19:13
My problem is something like this. Hope you understand it now. https://angular-cvf1fp.stackblitz.io Although there is an error in the console but it's not in my application – Kashif Nazar Apr 26 '18 at 19:24
Thanks so much for your solution. If you can post it as a separate answer I can mark it as the correct one. – Kashif Nazar Apr 27 '18 at 06:26
@KashifNazar did you say that to me? How my example helped you?I checked your example. Somethings strange. Why do you re-create form every 2 seconds? I think it is not the solution. I think you just need enable/disable control like I suggested in my example. My answer is already separated. Seems to me you answered to somebody another. I don't understand what you want now. – Sharikov Vladislav Apr 27 '18 at 06:30
I am sorry. The comment was meant for someone else. About the problem, I just used that two seconds interval for the example to demonstrate that the form was being recreated from an Observable. In actual, I am creating the form in an Observable which executes whenever the URL changes. – Kashif Nazar Apr 27 '18 at 18:49
So what was the problem? Can you write your own variant as answer? It is interesting. – Sharikov Vladislav Apr 28 '18 at 06:55

Michael W. Czechowski · Answer 2 · 2018-04-26T19:02:44.483

You're right. The subscription is only fired once, so after submitting the form the user entity does not change anymore. To do it, add for instance an event handler to your form submit.

user.component.html

<form [formGroup]="form" (submit)="_updateForm()">
    <input type="text" id="name" fromControlName="name" />
    <input type="text" id="age" fromControlName="age" />
</form>

user.component.ts

private userId: any;


ngOnInit() {
    this._route.queryParams.subscribe(params => {
        this.userId = params.userId;
        this._updateForm();
    });
}

private _buildForm(user){
    this.form = _fb.group({
        name: [{value: user.name, disabled: user.someCondition}, Validators.required],
        age: [{value: user.age, disabled: user.anotherCondition}, Validators.required]
    });
} 

// The update function has to be public to be called inside your template
public _updateForm(){
    getUser(this.userId).subscribe(user => {
        this._buildForm(user);
    });
}

Thanks for your answer. The subscribe method does fire multiple times whenever there is a change in the params. (userId) — Kashif Nazar, Apr 26 '18 at 18:55

mc01 · Answer 3 · 2018-04-26T19:30:27.893

Create the formGroup directly in ngOnit w/controls disabled by default so you're sure it exists w/o worrying about async issues.
In this._route.queryParams.subscribe(...) you can use this.form.setValue({//set all control values}) or this.form.patchValue({//set individual controls}) to update the individual controls as needed/once available.
Use component instance variables for condition and someOtherCondition (or a user object as a whole if you want to separate your data model from the form's model - they don't have to be the same). Initialize these to "false", and refer to them instead for enabling/disabling the controls in the formGroup creation. You can also update those variables in the same .subscribe() block once the user data is in place, instead of waiting to access user data model directly.

This way your controls and formGroup exist, and are disabled, until the async data is available.

score 1 · Answer 4 · answered Apr 26 '18 at 19:03

1

<form [formGroup]="form">
    <input type="text" id="name" fromControlName="name" />
    <input type="text" id="age" fromControlName="age" />
</form>

do you see a typo here?fromControlName should be formControlName After that change toggling will work ;)

https://angular-rivxs5.stackblitz.io

answered Apr 26 '18 at 19:03

Antoniossss

31,590
6
57
99

Nice catch. This typo isn't there in the code. It's just here. Let me correct it. – Kashif Nazar Apr 26 '18 at 19:04

Angular 4 - Reactive Forms enable/disable not working

4 Answers4