问题描述
我尝试将一些值修补到 from 控件，但它没有显示。为什么？ 我将在这里分享我的代码示例，
构造函数
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()
}
初始化函数
这里的数据是在这个组件初始化后存储到localstorage的。
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()
}
}
填充日期
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)
}
这个组件的HTML是
<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>
我也试过了
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)
请帮我解决这个问题。我已经试了两三天了。如果需要更多详细信息，请发表评论。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）