I've tried to patch some of the values to the from control, but it is not showing. why? I'll share my code examples here,
constructor
constructor(
private fromBuilder: FormBuilder
) {
this.OrderNShippingForm = this.fromBuilder.group({
billTitle: this.fromBuilder.control(''),
billName: this.fromBuilder.control(''),
billCompany: this.fromBuilder.control(''),
billAddress1: this.fromBuilder.control(''),
billAddress2: this.fromBuilder.control(''),
billCity: this.fromBuilder.control(''),
billProvince: this.fromBuilder.control(''),
billZIP: this.fromBuilder.control(''),
billCountry: this.fromBuilder.control(''),
})
}
ngOninit
ngOnInit(): void {
this.initializeForm()
}
function to initialize
here the data is strored to localstorage after the initialization of this component.
public initializeForm() {
if (localStorage.getItem('customer').length > 0 && localStorage.getItem('address').length > 0) {
this.customer = JSON.parse(localStorage.getItem('customer'));
this.address = JSON.parse(localStorage.getItem('address'));
this.populateData()
}
}
populate date
public populateData() {
this.billAddress.title = this.address.title
this.billAddress.name = this.address.name
this.billAddress.company = this.address.company
this.billAddress.address1 = this.address.address1
this.billAddress.address2 = this.address.address2
this.billAddress.city = this.address.city
this.billAddress.province = this.address.province
this.billAddress.zip = this.address.zip
this.billAddress.country = this.address.country
this.OrderNShippingForm.get('billTitle').patchValue(this.address.title)
this.OrderNShippingForm.get('billName').patchValue(this.address.name.trim())
this.OrderNShippingForm.get('billCompany').patchValue(this.address.company)
this.OrderNShippingForm.get('billAddress1').patchValue(this.address.address1)
this.OrderNShippingForm.get('billAddress2').patchValue(this.address.address2)
this.OrderNShippingForm.get('billCity').patchValue(this.address.city)
this.OrderNShippingForm.get('billProvince').patchValue(this.address.province)
this.OrderNShippingForm.get('billZIP').patchValue(this.address.zip)
this.OrderNShippingForm.get('billCountry').patchValue(this.address.country)
}
the HTML of this component is
<form [formGroup]="OrderNShippingForm" autocomplete="off">
<div class="card card-body col-6">
<h4>Billing Address</h4>
<hr>
<div class="row mt-2">
<div class="col-6">
<select name="billTitle" id="billTitle" formControlName="billTitle"
class="form-control" [(ngModel)]="billAddress.title">
<option value="" selected disabled>Title</option>
<option value="Mr">Mr</option>
<option value="Ms">Ms</option>
<option value="Mx">Mx</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
</select>
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<input type="text" name="billName" id="billName" formControlName="billName"
class="form-control" placeholder="Name" [(ngModel)]="billAddress.name">
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<input type="text" name="billCompany" id="billCompany" formControlName="billCompany"
class="form-control" placeholder="Company" [(ngModel)]="billAddress.company">
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<input type="text" name="billAddress1" id="billAddress1" formControlName="billAddress1"
class="form-control" placeholder="Address1" [(ngModel)]="billAddress.address1">
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<input type="text" name="billAddress2" id="billAddress2" formControlName="billAddress2"
class="form-control" placeholder="Address2" [(ngModel)]="billAddress.address2">
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<input type="text" name="billCity" id="billCity" formControlName="billCity"
class="form-control" placeholder="city" [(ngModel)]="billAddress.city">
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<input type="text" name="billProvince" id="billProvince" formControlName="billProvince"
class="form-control" placeholder="Province" [(ngModel)]="billAddress.province">
</div>
</div>
<div class="row mt-2">
<div class="col-6">
<input type="text" name="billZIP" id="billZIP" formControlName="billZIP"
class="form-control" placeholder="ZIP" [(ngModel)]="billAddress.zip">
</div>
<div class="col-6">
<input type="text" name="billCountry" id="billCountry" formControlName="billCountry"
class="form-control" placeholder="Country" [(ngModel)]="billAddress.country">
</div>
</div>
<div class="row mt-2">
<div class="col-12">
<select name="billAddressType" id="billAddressType" formControlName="billAddressType"
class="form-control">
<option value="billing/default">Billing/Default Address</option>
<option value="shipping" >Shipping Address</option>
</select>
</div>
</div>
</div>
</form>
also i've tried
this.OrderNShippingForm.get('billTitle').setValue(this.address.title)
this.OrderNShippingForm.get('billName').setValue(this.address.name.trim())
this.OrderNShippingForm.get('billCompany').setValue(this.address.company)
this.OrderNShippingForm.get('billAddress1').setValue(this.address.address1)
this.OrderNShippingForm.get('billAddress2').setValue(this.address.address2)
this.OrderNShippingForm.get('billCity').setValue(this.address.city)
this.OrderNShippingForm.get('billProvince').setValue(this.address.province)
this.OrderNShippingForm.get('billZIP').setValue(this.address.zip)
this.OrderNShippingForm.get('billCountry').setValue(this.address.country)
please help me resolve this. I've been trying for two three days. please comment if any more details are needed.