我有一个具有动态添加/删除输入功能和自动完成功能的 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)
);
}**
形式.价值
"addresses": [
{
"address": "",
"lat": 0,
"lon": 0,
"maxTravelTime": "5 min",
"travelTypeId": 0
},
{
"address": "",
"lat": 0,
"lon": 0,
"maxTravelTime": "5 min",
"travelTypeId": 0
}
]