Question

我有一个带有动态添加/删除输入功能和自动完成功能的FormArray。我需要在FormArray的formGroup中更新输入值。

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
    }
  ]

Answer 1

您可以将at用于formArray，并仅为该特定表单组设置值。您已将索引传递给方法，因此请与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)
  );
}

服务器响应后，Angular2在FormArray的FormGroup内更新输入值

1 个答案: