如何設置角度2中的組件的輸入字段值

export interface User { 
    name: string; 
    address?: { 
    street?: string; 
    postcode?: string; 
    country?: Country; 
    } 
} 

export class Country { 
    name: string; 
    code: string; 
}

我正在使用ng2-completer庫在UI中附加國家/地區選擇。如何設置角度2中的組件的輸入字段值

<div class="form-group" formGroupName="address"> 
    <label for="">Country</label> 
    <ng2-completer 
    [(ngModel)]="searchStr" 
    [datasource]="dataService" 
    [minSearchLength]="0" 
    (selected)="onSelected($event)" 
    formControlName="country" 
    [class]="form-control"> 
    </ng2-completer> 
</div> 


protected searchData = [ 
    { name: 'india', code: 'ind' }, 
    { name: 'australia', code: 'aus' }, 
    { name: 'sri lanka', code: 'sla' } 
]; 

private searchStr: String; 
private dataService: CompleterData; 
private selectedCountry: Country; 

constructor(
    private _fb: FormBuilder, 
    private _cService: CompleterService 
) { 
    this.dataService = _cService.local(this.searchData, 'name', 'name'); 
} 

protected onSelected(selectedItem: CompleterItem) { 
    if(selectedItem) { 
    this.selectedCountry = selectedItem.originalObject; 
    console.log(this.selectedCountry); 
    // this logs the selectedCountry. 
    this.myForm['controls']['address']['controls']['country'].setValue(this.selectedCountry)); 
    } 
}

兩件事情在這裏：

this.searchStr = this.selectedCountry.code;

在上面的代碼嘗試它顯示了UI，並在它傳遞相同的字符串提交的表單中選擇的代碼，但我想這是一個當表單被提交時對象。

this.myForm['controls']['address']['controls']['country'].setValue(this.selectedCountry));

通過上面的代碼，當表單被提交時，它成功地發送了國家對象，但問題出現在UI中，它顯示了[object Object]。

我希望它顯示在UI中選定的字符串/代碼，但在提交時，這應該發送國家對象。如何實現這一目標？

來源

2017-06-19 Ajay

看到setValue沒有問題。 :) 現在它顯示國家名稱並提交相同。 +它顯示國家對象（但在UI中不好看[對象對象]）並提交對象。但我想要的是選擇它應該顯示UI中的國家名稱，但提交它應該通過國家對象。 – Ajay

你可以試試下面：

變化字符串searchstr從字符串到國家並結合[（ngModel）] =「searchStr.name」

來源

2017-06-19 07:06:12

用此設置字段值與字符串並提交它發送相同的字符串。但我希望它發送國家對象。 – Ajay

您可以創建將包含該對象的隱藏元素將被髮送，而顯示的數據仍然沒有改變：

<div class="form-group" formGroupName="address"> 
    <label for="">Country</label> 
    <ng2-completer 
     [(ngModel)]="searchStr" 
     [datasource]="dataService" 
     [minSearchLength]="0" 
     (selected)="onSelected($event)" 
     [class]="form-control"> 
    </ng2-completer> 
    <input 
     type="hidden" 
     formControlName="country"> 
</div>

來源

2017-06-23 12:55:01

是的，我已經實施這種方式！ :) – Ajay

試試下面的代碼：

<ng2-completer 
    formControlName="captain" 
    (selected)="onSelected($event)" 
    [datasource]="captains" 
    [minSearchLength]="0" 
></ng2-completer> 

onSelected(event){ 
    console.log(`Event: ${ JSON.stringify(event)}`) 
}

來源

2017-08-16 03:24:36

如何設置角度2中的組件的輸入字段值

回答

相關問題