表单未更新/获取的对象未定义

时间:2019-01-11 17:28:52

标签: javascript angular typescript ionic-framework

我正在加载一组保存的模板,以便每个模板都是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();
    }  
}

enter image description here

0 个答案:

没有答案