Reactive forms in Angular: Two-way binding

Question

I have a problem with Reactive forms. Updating the model class when the User changes the input is straight forward. But I need to do the opposite way: programmatically change the model, and see the changes in the HTML form.

The simplified code is:

this.user = new User();

And then:

this.form = this.fb.group({
      name: new FormControl(this.user.name, [Validators.required]),
      email: new FormControl(this.user.email, [Validators.required])    
    });

Assume that it is working fine. If the user updates the name in the GUI the this.user.name is being correctly updated.

Assume that I have added some logic to User class, that populates the email based on the entered name. Every time the name changes, the email field is auto-generated as 'name'@gmail.com

Unfortunately the generated email is not visible in the GUI. How to achieve that?

How to notify the FormGroup about changes in the User class?

I had two ideas:

1) Add ([ngModel]) - and it worked - but I feel that it is a bad idea to mix Reactive Forms with ngModel

2) Add the following code, after the form is created:

this.form.controls["name"].valueChanges.distinctUntilChanged().subscribe(form => {
    this.form.patchValue({email: this.model.email});
});

But it does not look clean. Is there any other option?

What does a console.log(this.model.email) print in the subscription? — Felix Lemke
– Felix Lemke, Commented Jun 10, 2018 at 11:35

GreyBeardedGeek · Accepted Answer · 2018-06-10 13:29:56Z

4

That's just not how reactive forms are intended to work.

With reactive forms, the form is not bound to your model, it has its own model, which you can see if you look at "form.value".

The value that you pass to the form control as you are creating it is not bound, it's just used as an initial value for the form control.

The intention is that the user fills out the form, validations happen dynamically (that's the reactive part), and then when they submit the form, you transfer the form's value to your model, all at once.

That said, if you want to update the value of a form control, patchValue is indeed the correct way to do it.

answered Jun 10, 2018 at 13:29

GreyBeardedGeek

30.3k2 gold badges51 silver badges71 bronze badges

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

2 Comments

Artur Over a year ago

So ... if I need to make such interaction as model -> HTML form I should stick to template driven forms and two-way databinding ?

GreyBeardedGeek Over a year ago

I suppose so, but I can't imagine a use case where you "need" to bind your form directly to your model.

Collectives™ on Stack Overflow

Reactive forms in Angular: Two-way binding

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related