Angular 2 - two way binding for ngFor objects array with editable inputs

Question

I'm new to Angular 2, trying to implement ngFor list of objects with editable inputs, be able to add a new object and save the data. The data is:

business: { email: "[email protected]", 
locations: [
{ country: "US", city: "city 1", address_line_1: "address 1"},
{ country: "Australia", city: "city 1", address_line_1: "address 2"}
]}

In the component:

ngOnInit() {
this.businessForm = new FormGroup({
        email: new FormControl(null, [Validators.required]), 
        locationCountry: new FormControl(null)
});
addLocation() {
    this.isFormChanged = true;
    let newLocation = {};
    this.business.locations.push(newLocation);
}

removeLocation(item){
    if (null !== item) {
        this.isFormChanged = true;
        this.business.locations.splice(item, 1);
    }
}

Html:

<div class="form-group">
            <label for="locations">Locations</label>
            <div class="row">
                <div class="col-md-3">
                <button
                        id="locations"
                        class="btn btn-secondary"
                        type="button"
                        (click)="addLocation()">Add new address</button>

                </div>
            </div>

            <!--LOCATIONS LIST-->
            <ul class="locations-tag">
                <li *ngFor="let location of business?.locations; let index=index;">
                    <a class="btn btn-danger categories-tag-btn" (click)="removeLocation(index)">X</a>
                    <span>{{business?.locations[index].country}}</span>
                    <input
                            id="locations-{{index}}"
                            [(ngModel)]="business?.locations[index].country"
                            formControlName="locationCountry"
                            name="locations-{{index}}"
                            type="text" 
                            class="form-control"
                            placeholder="Country" 
                            aria-label="Country"
                            value={{business?.locations[index].country}}>
                    ...

                </li>
            </ul>

    </div>

When it runs I get an error

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'US'. Current value: 'Australia'.

Looks like it changes all the inputs values to the last one. I tried to implement the same idea through FormBuilder, but it didn't work out either.

Can you try to remove the ? after let location of business?.locations — Azoulay Jason
– Azoulay Jason, Commented Sep 12, 2017 at 16:59
I don't think reactive forms are good for two-way databinding, I think you'd want to try that with a template-driven form. — Alex Beugnet
– Alex Beugnet, Commented Sep 12, 2017 at 17:12

halfer · Accepted Answer · 2017-10-07 11:13:48Z

4

I have created a Plunker. I remove formControlName because it's not FormsModule, it's ReactiveFormsModule - that is different.

For more information between FormsModule(NgModel) vs ReactiveFormsModule read documentation. Also, it's better to delete value because you are using [(ngModel)] that is making two-way data-binding to the value.

  <input
                        id="locations-{{index}}"
                        [(ngModel)]="business?.locations[index].country"
                        name="locations-{{index}}"
                        type="text" 
                        class="form-control"
                        placeholder="Country" 
                        aria-label="Country"
                        >

edited Oct 7, 2017 at 11:13

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Sep 12, 2017 at 17:13

alexKhymenko

5,64826 silver badges40 bronze badges

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

2 Comments

InnaZis Over a year ago

Thanks, @alexKhymenko! I will probably go on with ReactiveForms. The problem is there were more elements that worked with FormsModule and I hoped to solve it the same way.

alexKhymenko Over a year ago

@InnaZis Just remember to not use them both at the same time. Happy coding :-)

amal · Accepted Answer · 2017-09-12 17:21:22Z

0

(Answering since I am not yet allowed to comment). In addition to @alexKhymenko's answer, if you want to stick with ReactiveForms(Module), you will have to add the parent formGroup, businessForm you created in your component, also to the template. Not sure if this will fix your issue though, but try to add this attribute to the top <div class="form-group"> like this <div class="form-group" [formGroup]="businessForm"> of the template. If you are happy with non-reactive forms, then @alexKhymenko's answer might be sufficient.

answered Sep 12, 2017 at 17:21

amal

3,1801 gold badge15 silver badges21 bronze badges

1 Comment

InnaZis Over a year ago

Thanks, tried with this attribute, didn't help. I'll probably rewrite according to @alexKhymenko's suggestion.

Collectives™ on Stack Overflow

Angular 2 - two way binding for ngFor objects array with editable inputs

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related