How to bind reactive angular form into object as two-way databind?

Question

I have angular form:

profileForm = new FormGroup({
 firstName: new FormControl(''),
 lastName: new FormControl(''),
});

<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>

Also I have an data object:

const person = { firstName: 'firstbla', lastName: 'lastbla' }

I want to bind the object into the form.

But when I form.firstName change it also reflect the change in person.firstName. (two-way data binding).

Is it possible to do in angular reactive form ? I try with patchValue, but it doesn't change the person.

BhargavG · Accepted Answer · 2019-11-27 12:14:15Z

1

You can use ValueChanges. Form initialisation will be like this,

profileForm = new FormGroup({
 firstName: new FormControl(person && person.firstName ? person.firstName : ''),
 lastName: new FormControl(person && person.lastName ? person.lastName : ''),
});

You have to create one new method in the ngOnInit() after form initialisation method,

detectValueChange = () => {
this.profileForm.valueChanges.subscribe((response) => {
      person.firstName = response.firstName;
      person.lastName = response.lastName;
    })
};

This way both your form and object's value will be on the same page.

answered Nov 27, 2019 at 12:14

BhargavG

9061 gold badge6 silver badges15 bronze badges

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

Comments

Saloo · Accepted Answer · 2019-11-27 11:32:21Z

0

patchValue update the values in the form.

Reactive form also works in two way binding. Whatever change you do in form , you can get the values. In this case,you can initialize the form with object values.

const person = { firstName: 'firstbla', lastName: 'lastbla' }

profileForm = new FormGroup({
 firstName: new FormControl(person.firstName),
 lastName: new FormControl(person.lastName),
});

Whenever you make any changes in the form, before submit you can call:

const formValues = profileForm.value;
const firstName = formValues.firstName;
const lastName = formValues.lastName;

answered Nov 27, 2019 at 11:32

Saloo

8166 silver badges13 bronze badges

2 Comments

Jon Sud Over a year ago

I want the person.firstname to be bind as two-way databind in reactive form. without ngmodel, which doesn't happends in your example

Saloo Over a year ago

Reactive form hides this ngModel and do two way binding using formControlName what you have used in form fields.

Collectives™ on Stack Overflow

How to bind reactive angular form into object as two-way databind?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related