Angular 在ng2-select2指令中绑定反应表单formControlName

在我的

angular5

项目中，我使用反应式表单来处理表单。在这个表单中，我使用

ng2-select2

创建select2下拉列表，但是当我试图将

formControlName

绑定到

指令中时，它会给我带来错误

错误：名称为“公民身份\u id”的表单控件没有值访问器

以下是.ts文件中的ngOnInit函数：

ngOnInit() {
    this.jobId = this.route.snapshot.queryParams.jobId;
    this.detailForm = new FormGroup({
        date_of_birth: new FormControl(null, Validators.required),
        gender: new FormControl('', Validators.required),
        marital_status: new FormControl('', Validators.required),
        npwp_family_status_id: new FormControl('', Validators.required),
        citizenship_id: new FormControl('', Validators.required),
    });

    this.ajaxOptions = {
        url: API_URL + '/generate-json',
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                s: params.term,
                page: params.page,
                model_name: 'country'
            };
        },
        type: 'POST',
        processResults: function (res) {
            let data = $.map(res.results, function (obj) {
                if (obj.overwriteId)
                    obj.id = obj.overwriteId;
                return obj;
            });

            return {
                results: data,
                pagination: res.pagination
            };
        }
    };

    this.options = {
        ajax: this.ajaxOptions,
        // theme: 'bootstrap',
        width: '100%',
        allowClear: true,
        placeholder: 'Select...',
        language: {
            'errorLoading': function () {
                return 'Searching…';
            }
        },
        templateResult: function (data) {
            return data.create === true ? data.text + ' <b style="color: lightgreen;">(create new)</b>' : data.text;
        },
        templateSelection: function (data) {
            return data.create === true ? data.text + ' <b class="text-success">(create new)</b>' : data.text;
        },
        escapeMarkup: function (markup) {
            return markup;
        },
        createTag: function (params) {
            var term = $.trim(params.term);
            return term ? {
                id: term,
                text: term,
                create: true
            } : null;
        },
        insertTag: function (data, tag) {
            var found = false;
            $.each(data, function (i, e) {
                if (e.text.toLowerCase() == tag.text.toLowerCase())
                    found = true;
            });
            if (!found)
                data.unshift(tag);
        },
        minimumInputLength: 2
    };
}

ngOnInit（）{
this.jobId=this.route.snapshot.queryParams.jobId；
this.detailForm=新表单组({
出生日期：新FormControl（空，需要验证器），
性别：新FormControl（“”，需要验证器），
婚姻状况：新FormControl（“”，需要验证器），
npwp_系列_状态_id:新FormControl（“”，需要验证程序），
公民身份：新的FormControl（“”，需要验证器），
});
this.ajaxOptions={
url:API_url+'/generate json'，
数据类型：“json”，
延误：250，
数据：函数（参数）{
返回{
s:params.term，
页码：params.page，
型号名称：“国家”
};
},
键入：“POST”，
processResults：函数（res）{
让数据=$.map（res.results，function（obj））{
if（对象覆盖ID）
obj.id=obj.id；
返回obj；
});
返回{
结果：数据，
分页：res.pagination
};
}
};
此选项={
ajax:this.ajaxOptions，
//主题：“引导”，
宽度：“100%”，
allowClear:是的，
占位符：“选择…”，
语言：{
“errorLoading”：函数（）{
返回“搜索…”；
}
},
templateResult:函数（数据）{
返回data.create==true？data.text+'（新建）'：data.text；
},
模板选择：函数（数据）{
返回data.create==true？data.text+'（新建）'：data.text；
},
转义标记：函数（标记）{
返回标记；
},
createTag:函数（参数）{
变量项=$.trim（参数项）；
回报期{
id:术语，
案文：任期，
创建：true
}：null；
},
insertTag:函数（数据、标记）{
var=false；
$。每个（数据、功能（即）{
if（e.text.toLowerCase（）==tag.text.toLowerCase（））
发现=真；
});
如果（！找到）
数据反移位（tag）；
},
最小输入长度：2
};
}

这是我的.html文件：

<select2 [options]="options" formControlName="citizenship_id"></select2>

---

问题在于您的自定义组件

选择2

。您的组件似乎没有实现

ControlValueAccessor

。只需确保您的组件实现了

ControlValueAccessor

参见简单示例-

---

请参阅这篇漂亮的文章-

，虽然Select2不能以本机方式处理ReactiveForms，但这里有一个很好的解决方案：

创建绑定到formControlName的新隐藏输入。每当更改select2的值时，也要更新隐藏输入的值

如果您从API获得响应，并且希望预先选择该值，请使用具有响应中所选值的数组变量（例如：

[{id:1，text:'selected value'}]

，然后在select2指令中，设置

[value]=“{selected\u value\u id}”

）

---

要感谢OP@DennyRustandi和@SunilSingh在评论中提供了这些信息。

您是否在html中定义了

？@SunilSingh我确实定义了

。问题是，我可以获取其他输入，但这是select2输入。您是否找到此@DennyRustandi@Asif的解决方案？如果我创建一个绑定到formControlName的新隐藏输入。每当我更改select2的值时，我都会将隐藏输入的值更新为well@Asif比如你从API得到响应，你想预先选择值？在我的例子中，我有一个数组变量，它包含了我从响应中选择的值，例如：

[{id:1，text:'selected value'}]

，然后在select2指令中设置

[value]=“{selected\u value\u id}”

那么，在开发人员实现

ControlValueAccessor

之前，ng2-select2将不会与reactiveForm功能一起工作，这公平吗？