Angular 2-具有可编辑输入的ngFor对象数组的两种方式绑定

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@something.com", 
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.

Answer 1

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"
                        >

Answer 2

(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.