我正在加载一组保存的模板,以便每个模板都是ion-select的一个选项。选择选项后,表单应更新为模板中的信息。这些选项看起来不错,但是当我检查日志时,它不能与所选对象的属性一起使用,因为表单使用未定义的值(空白)进行了更新,这使我相信我没有正确获取模板。
以下是表单的HTML代码:
<div class="transaction-form">
<form [formGroup]="transactionForm" (submit)="doTransaction()">
<ion-list>
<ion-item>
<ion-label>Recipient</ion-label>
<ion-input [formControl]="transactionForm.controls['recipient']" type="text" ></ion-input>
</ion-item>
<ion-item>
<ion-label>IBAN</ion-label>
<ion-input [formControl]="transactionForm.controls['destination']" type="text"></ion-input>
</ion-item>
<ion-item>
<ion-label >Amount</ion-label>
<ion-input [formControl]="transactionForm.controls['amount']" type="number"></ion-input>
</ion-item>
<ion-item>
<ion-label>Description</ion-label>
<ion-input [formControl]="transactionForm.controls['reference']" type="text"></ion-input>
</ion-item>
</ion-list>
</form>
<ion-item>
<ion-label>Load template</ion-label>
<ion-select [(ngModel)]="selectObj" (ionChange)="onSelectChange($event, selectObj)">
<ion-option *ngFor = "let template of templates;">
{{template.reference}}
</ion-option>
</ion-select>
</ion-item>
</div>
这是打字稿文件
export class NewTransactionPage {
transactionForm: FormGroup;
templates: Template[];
selectObj: Template;
constructor( public formBuilder: FormBuilder, private _cdr: ChangeDetectorRef, public templateServicerino: TemplateService) {
this.templateServicerino.createTemplate("DE365849", "John Johnson", 420, "Testerino");
this.templates = this.templateServicerino.getAllTemplates();
this.transactionForm = formBuilder.group({
recipient: [''],
destination: [''],
amount: [0.01],
reference: [''],
});
}
onSelectChange(selected:any,selectObj){
this.transactionForm.patchValue({
recipient: selectObj.recipient,
destination: selectObj.destination,
amount: selectObj.amount,
reference: selectObj.reference
});
this.transactionForm.controls['recipient'].setValue(selectObj.recipient);
this.transactionForm.controls['destination'].setValue(selectObj.destination);
this.transactionForm.controls['amount'].setValue(selectObj.amount);
this.transactionForm.controls['reference'].setValue(selectObj.reference);
this._cdr.detectChanges();
}
}