Issue
I am trying to display shipping addressses from the API , currently there are three addresses in the database but only one address is displaying 3 times
This is the Component Html Code
<div class="row" formControlName="shippingAddressForm">
<div class="form-group col-6">
<h1 class="h3 mt-4">Shipping Address</h1>
<div *ngFor="let item of shippingAddress?.data">
<form
[formGroup]='shippingAddressForm'
(ngSubmit)="Save(shippingAddressForm.value)"
>
<br>
<app-text-input formControlName="country" [label]='"Country"'></app-text-input>
<app-text-input [formControl]='shippingAddressForm.controls["phone"]' [label]='"Phone Number"'></app-text-input>
<app-text-input formControlName="name" [label]='"Name"'></app-text-input>
<app-text-input [formControl]='shippingAddressForm.controls["email"]' [label]='"Email"'></app-text-input>
<app-text-input [formControl]='shippingAddressForm.controls["address"]' [label]='"Address"'></app-text-input>
<div class="row">
<div class="col-sm-4">
<label for="state">State</label>
</div>
<select class="custom-select form-group"
style="width: auto"
formControlName="state"
[class.is-invalid]='shippingAddressForm.get("state").errors
&& shippingAddressForm.get("state").touched'
>
<option *ngFor='let state of selectedState?.data.data' [value]="state.id"> {{state.state}}</option>
</select>
</div>
<div class="row">
<div class="col-sm-4">
<label for="city">City</label>
</div>
<select class="custom-select form-group"
style="width: auto"
formControlName="city"
[class.is-invalid]='shippingAddressForm.get("city").errors
&& shippingAddressForm.get("city").touched'
>
<option *ngFor='let city of selectedCity?.data.data' [value]="city"> {{city}}</option>
</select>
</div>
</form>
</div>
</div>
</div>
This is the TS component code
loadShippingAddress() {
this.shippingaddressService.getShippingAddress().subscribe(address => {
console.log('address data',address);
this.shippingAddress = address;
if(this.shippingAddress) {
console.log('if address',address);
for (let item of this.shippingAddress.data)
this.shippingAddressForm.patchValue(item);
}
}, error => {
console.log(error);
})
} This is the data in console log showing all shipping addresses in the database
This is the result in the application
Solution
here i am considering that your form has only following fields country,phone
here on init just declared form structure and in loadShippingAddress() added the actual logic to create the form
yourForm : FormGroup;
ngOnInit()
{
this.yourForm = new FormGoup({
‘addressess’: new FormArray([])
})
}
loadShippingAddress() {
let addressess = new FormArray([]);
this.shippingaddressService.getShippingAddress().subscribe(address =>
{
this.shippingAddress = address;
if(this.shippingAddress)
{
for(let address of this.shippingAddress.data)
{
addressess.push(
new FormGroup({
'country':new FormControl(address.country),
'phone':new FormControl(address.phone)
})
)
}
}
this.yourForm = new FormGoup({
'addressess' : addressess
})
}, error =>
{
console.log(error);
})
}
//getter used in html to loop through address
get adddressControls(){
return (<FormArray>this.yourForm.get('addressess')).controls
}
html
<form [formGroup]='yourForm'>
<div class="row">
<div class="col-xs-12" formArrayName="addressess">
<div
style="margin:5px;"
class="row"
*ngFor="let address of adddressControls;let i = index"
[formGroupName]="i"
>
<div class="col-xs-8">
<app-text-input formControlName="country" [label]='"Country"'></app-text-input>
</div>
<div class="col-xs-2">
<app-text-input formControlName="phone" [label]='"Phone Number"'></app-text-input>
</div>
</div>
<hr>
</div>
</div>
</form>