angular - 与 formControlName 一起使用的 Angular 4 Multiselect 插件

问题描述

我正在寻找一个多选插件（即https://www.npmjs.com/package/ng-multiselect-dropdown），但它可以与 formControlName 一起使用。

我有一个属性组件（我希望插件在其中工作），其他组件使用它来创建基于动态表单模板的表单。这就是为什么我不得不使用这个组件。

组件：

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Attribute } from '../../models/attribute';

@Component({
    selector: 'app-attribute',
    templateUrl: './template.html',
    styleUrls: ['./style.css']
})
export class AttributeComponent implements OnInit {
    @Input() attribute: Attribute;
    @Input() form: FormGroup;
    @Input() forceReadonly = false;
    constructor() { }

    ngOnInit() {
    }

}

风景：

<div class="form-group" [formGroup]="form">
    <label [attr.for]="attribute.name">{{attribute.displayName}} <span class="mandatory" *ngIf="attribute.required === true">*</span></label>
    <div [ngSwitch]="attribute.type">
        <input *ngSwitchCase="'TEXT'" type="text" class="form-control" [id]="attribute.name"
            [formControlName]="attribute.name"
            [readonly]="forceReadonly ? true : attribute.readOnly"
            [required]="attribute.required"
        />
        <select *ngSwitchCase="'SELECT'" class="form-control" [id]="attribute.name"
        [formControlName]="attribute.name" [disabled]="forceReadonly ? true : attribute.readOnly">
            <option *ngFor="let opt of attribute.format.values" [value]="opt">{{opt}}</option>
        </select>
        <select *ngSwitchCase="'MULTISELECT'" class="form-control" [id]="attribute.name"
        [formControlName]="attribute.name" multiple="multiple" [disabled]="forceReadonly ? true : attribute.readOnly">
            <option *ngFor="let opt of attribute.format.values" [value]="opt">{{opt}}</option>
        </select>
    </div>
</div>

所以我不能将我的多选组件绑定到一个 ngModel，就像我看到需要的那样。

你能帮帮我吗？

谢谢

标签： angular

angular - 与 formControlName 一起使用的 Angular 4 Multiselect 插件

问题描述

解决方案

推荐阅读