Question

我有一个相当复杂的形式，到目前为止一直很痛苦。我在这里遇到了一些麻烦。

我正在使用名为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上的这个多选中删除一个项目，它就不会删除。

所以，这里似乎有一些模型问题没有按预期工作。

我做错了什么都突出了？

Answer 1

根据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，我们必须使'options'的数组符合这样的IOptions接口（省略disabled属性，因为它是'可选'），

成分</ P>

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>

我自己没有尝试过这种方法（之前从未与ng-select合作过），但我非常相信文档和那里的例子可以使用。您可能必须将组件中使用的变量/方法调整为您希望它适用于您的特定用例的方式。希望它有所帮助。

Angular2反应表单模型绑定 - 多选不反映更新

1 个答案: