Question

我正在使用Reactive Form处理我的Angular 5项目中的表单。并以这种形式使用ng2-select2创建我的select2下拉列表，但是当我尝试将formControlName绑定到我的<select2></select2>指令中时，它给了我错误

错误错误：名称为“ citizenship_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
    };
}

这是我的.html文件：

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

Answer 1

虽然Select2在本机上不能与ReactiveForms一起使用，但这是一个很好的解决方法：

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

如果您从API获得响应，并且想要预选该值，请使用具有从响应中选择的值的数组变量（例如：[{id: 1, text: 'Selected Value'}]然后在select2指令中设置[value]="{selected_value_id}"）

在评论中向OP @DennyRustandi和@SunilSingh提供此信息。

Answer 2

问题与您的自定义组件float有关。看来您的组件未实现a=[111,222,333,444,232,343] count =0 b = [] for i in a: for j in str(i): if int(j) % 2 == 0: count +=1 if count == len(str(i)): b.append(i) else: count = 0 break print b。只要确保您的组件确实实现了select2。

查看简单示例-https://stackblitz.com/edit/angular-custom-from-control-hqpwgb

请参阅这篇精美的文章-https://alligator.io/angular/custom-form-control/

在ng2-select2指令中绑定反应形式formControlName

2 个答案: