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
– Jonathan Brizio, Commented Apr 26, 2018 at 18:35
In your headline you've written Angular 2, haven't you @KashifNazar? — Michael W. Czechowski
– Michael W. Czechowski, Commented Apr 26, 2018 at 18:59

Sharikov Vladislav · Accepted Answer · 2018-04-26 19:00:16Z

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, 2018 at 19:00

Sharikov Vladislav

7,2999 gold badges53 silver badges92 bronze badges

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

10 Comments

Muhammad Kashif Nazar Over a year ago

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.

Sharikov Vladislav Over a year ago

Do you have ChangeDetectionStrategy set up?

Muhammad Kashif Nazar Over a year ago

No. I don't have

Sharikov Vladislav Over a year ago

I updated to the subscribe. It works. Even with ChangeDetectionStrategy.OnPush.

Sharikov Vladislav Over a year ago

Ok then just provide repro on stackblitz. We will fix it easily then.

|

Michael W. Czechowski · Accepted Answer · 2018-04-26 19:02:44Z

2

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

edited Apr 26, 2018 at 19:02

answered Apr 26, 2018 at 18:43

Michael W. Czechowski

3,4452 gold badges26 silver badges52 bronze badges

1 Comment

Muhammad Kashif Nazar Over a year ago

Thanks for your answer. The subscribe method does fire multiple times whenever there is a change in the params. (userId)

mc01 · Accepted Answer · 2018-04-26 19:30:27Z

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.

Antoniossss · Accepted Answer · 2018-04-26 19:03:25Z

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, 2018 at 19:03

Antoniossss

32.7k7 gold badges67 silver badges119 bronze badges

1 Comment

Muhammad Kashif Nazar Over a year ago

Nice catch. This typo isn't there in the code. It's just here. Let me correct it.

Collectives™ on Stack Overflow

Angular 4 - Reactive Forms enable/disable not working

4 Answers 4

10 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related