CODEWITHSUNDEEP
angularpatchformarray
Serhio g. Lazin
Serhio g. Lazin

Reputation: 9642

Angular2 update input value inside FormGroup of FormArray after server responce

I have a FormArray with dynamic add/delete inputs functionality and autocomplete. And I need update inputs value inside formGroup of FormArray.

HTML

<div formArrayName="addresses">
    <div class="row" *ngFor="let itemrow of searchForm.controls.addresses.controls; let ind=index" [formGroupName]="ind">
        <div class="col-md-3">
            <div class="form-group">
                <mat-form-field>
                        <input type="text" class="form-control" id="address" formControlName="address" matInput [matAutocomplete]="auto" (keyup)="getESRI($event.target.value)">
                                <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                                    <mat-option  (onSelectionChange)="bindLocation(option.text, option.magicKey, ind)" *ngFor="let option of testLocation; let in=index" [value]="option">
                                             {{ option.text }}
                                    </mat-option>
                                </mat-autocomplete>
                </mat-form-field>

                        <input type="text" class="form-control" formControlName="lat">
                        <input type="text" class="form-control" formControlName="lon">
                </div> 
        </div>
     </div> 
</div>

TS 

 **initAddressRows() {
        return this._fb.group({
            address: "",
            lat: 0,
            lon: 0,
            maxTravelTime: this.maxTime[0],
            travelTypeId: 0
        });
   }
 bindLocation(text, key, index) {
          console.log(index);

       this.service.getData(text, key).subscribe(
                  (response) => {this.actualLocationData = response.json()

                                 this.lon = this.actualLocationData.x;
                                 this.lat = this.actualLocationData.y;

                             // UPDATE HERE lon and lat inputs ONLY for this.group of Array, NOT ALL lat and lon inputs

                  },
                  (error) => console.log('ERROR: ' + error)
          );
   }**

form.value 

 "addresses": [
    {
      "address": "",
      "lat": 0,
      "lon": 0,
      "maxTravelTime": "5 min",
      "travelTypeId": 0
    },
    {
      "address": "",
      "lat": 0,
      "lon": 0,
      "maxTravelTime": "5 min",
      "travelTypeId": 0
    }
  ]

Upvotes: 1

Views: 721

Answers (1)

AVJT82
AVJT82

Reputation: 73367

You can use at for your formArray and only set the value for that specific formgroup. You are already passing the index to your method, so use that together with at.

bindLocation(text, key, index) {
  this.service.getData(text, key).subscribe((response) => {
    this.actualLocationData = response.json()
    this.lon = this.actualLocationData.x;
    this.lat = this.actualLocationData.y;
    // here!
    let formArr = <FormArray>this.searchForm.controls.addresses;
    formArr.at(index).patchValue({lat:this.lat, lon: this.lon})
  },
  (error) => console.log('ERROR: ' + error)
  );
}

Upvotes: 1

Related Questions