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反应形式模型绑定 - 多选择不反映更新

回答

相关问题