Angular2反應形式模型綁定 - 多選擇不反映更新

我有一個非常複雜的形式，迄今爲止一直是一個痛苦的設置。我在這裏陷入困境並陷入困境。Angular2反應形式模型綁定 - 多選擇不反映更新

我正在使用名爲ng-select的多選插件。該指令採用兩個數據陣列[items]和[active]。項目是可能的選項列表，並且是默認選擇的值。

我想用我的被動式表單模型進行配置。

<span> 
    <ng-select formControlName="AttributeValue" [allowClear]="true" [multiple]="true" [items]="fetchSourceList()" [active]="formatValues(ruleAttributeData.AttributeValue)" placeholder="Click to Select a Value" class="inlineSelect"></ng-select> 
</span>

這裏是一個什麼樣的形象我的形狀看起來像至今：

的array底部看到的是我的模型包含當創建窗體。這些是選定的值。

用於填充active（默認選擇）的方法是這樣的：

export interface ValueData { 
    RuleDetailID?: number; 
    AttrValue: string; 
    Value: string; 
    IsValueRetired: boolean; 
} 

private formatValues(data) { 
    return data.map((data: ValueData) => { 
     return { id: data.AttrValue, text: data.Value }; 
    }); 
}

我fetchSourceList()方法只返回的可能的項目從選擇的陣列。當調用下拉菜單選擇新選項時，我看不到已經選擇的選項，這是一件好事。它使我的事情，模型綁定最初但後來打破了某處後，

到目前爲止，頁面加載正常，我的默認選定的項目被標記爲在UI中選擇，並且form的值顯示8項在預期的陣列中。

這裏來..

雖然我[items]="fetchSourceList()"包含數據的列表那不是已經選定，選擇一個選項，不將其添加到輸入的問題。

當我從可用選項中選擇輸入時，選擇輸入不會顯示添加。當我得到表單的值時，我發現該項目已被添加到所選項目的數組中，並帶有一個catch。如果我繼續從列表中選擇選項，那麼它始終是我選擇的最後一個數字，最終以數字結尾8在我的陣列中。其次，如果我從ui上的這個多選中刪除一個項目，它不會刪除。

所以，這裏似乎有一些模型問題，不按預期工作。

什麼東西突出我做錯了？

來源

2017-09-26 SBB

我不太確定這個，但你可以檢查方法formatValues（）是否實際工作？，它被定義爲私有方法，並且您正嘗試從DOM訪問它。 –

@priteshagrawal - 這是工作，剛剛確認。 'ruleAttributeData.AttributeValue'是我通過界面傳遞的一個對象，以便專門爲多重選擇進行格式化。數據需要被格式化爲具有'text'和'id'鍵的對象數組。在這種情況下，如果方法不起作用，它們將顯示爲「未定義」。 – SBB

@priteshagrawal然而它似乎是多次調用該方法，每個數組看起來都有一個值。如果我的數組包含10個選項來選擇表單，'formatValues'方法將被調用10次。似乎很奇怪...... – SBB

由於每docs（查看該頁面的文檔鏈接），該ng-select似乎並不具有items或active爲Input財產。要指定選項列表，您需要使用options屬性。對於選擇active選擇，將其設置爲組件內的formControl的默認值。

allowClear屬性僅用於單選（不是多選）。

此外，你的選擇數組元素應符合該類型按該文檔，

interface IOption { 
    value: string; 
    label: string; 
    disabled?: boolean; // this is optional 
}

可以導入該接口，

import { IOption } from 'ng-select';

假設，從例如，每部option元素包含值如{ id: "172", text: "Account Manager" }，其中id是要存儲的實際value和text是要顯示的label，我們必須將陣列，用於 '選項' 符合這樣的（因爲它是 '可選的' 省略disabled屬性）的IOptions接口，

部件

import { IOption } from 'ng-select'; 

form: FormGroup; 
// choose the 'active' or default selections for the options dropdown 
// by including the corresponding 'value' property of IOptions list elements 
// returned from the getOptions() call. Use it as the formControl's initial value (array since it is multi-select) 
defaultSelections = ['172', '180', '113']; 

ngOnInit() { 
this.form = new FormGroup({ 
    AttributeValue: new FormControl(this.defaultSelections) 
}); 
} 

getOptions(data): Array<IOption> { 
    return data.map((data: ValueData) => { 
     return { value: data.AttrValue, label: data.Value }; 
    }); 
}

模板

<form novalidate [formGroup]="form"> 
<span> 
    <ng-select formControlName="AttributeValue" [multiple]="true" [options]="getOptions(ruleAttributeData.AttributeValue)" placeholder="Click to Select a Value" class="inlineSelect"> 
    </ng-select> 
</span> 
</form>

我自己沒有試過（從來沒有與一起工作過之前），但我相信從文檔和在那裏給出的例子，它會起作用。您可能需要調整組件中使用的變量/方法，使其適用於您的特定用例。希望能幫助到你。

來源

2017-09-26 03:10:33 amal

Angular2反應形式模型綁定 - 多選擇不反映更新

回答

相關問題