Question

我试图创建一个多选下拉列表，该下拉列表绑定到一个动态属性，该属性使用服务从JSON脚本获取数据。我能够轻松地在下拉菜单中显示数据，但是每当我在select标签中放置多个属性时，下拉菜单就会开始表现异常，而且我也无法对数据进行多选。

我尝试使用另一个ng-multiselect-dropdown软件包，但是它也变得非常棘手。我想通过简单的HTML复选框并使用ngModel来做到这一点。我正在将数据发送到POST请求，因此基本上我正在尝试在后端发送多个值。

我该如何做？

<div class="col-sm-4">
    <div class="form-group form-float">
        <div class="form-line focused">
            <select id="teacherSubjects" #teacherSubjects=ngModel multiple="multiple" required class="validate form-control" name="teacherSubjects" [(ngModel)]="teacher.teacherSubjects"
                    (change)="onSelect($event.target.value)">
                <option style="display:none"></option>
                <option *ngFor="let x of subjects" [value]="x.code">{{x.name}}</option>
            </select>
            <label for="teacherSubjects" class="form-label">Subjects</label>
        </div>
        <div *ngIf="teacherSubjects.invalid && teacherSubjects.untouched">
            <span class="label ">Untouched</span>
        </div>
        <div *ngIf="teacherSubjects.invalid && teacherSubjects.touched">
            <div *ngIf="teacherSubjects.errors.required">
                <span class="label ">
                    <span class="text-danger">Subject is required</span>
                </span>
            </div>
        </div>
        <div *ngIf="teacherSubjects.valid">
            <span class="label ">ok</span>
        </div>
    </div> 
</div>

Answer 1

这是为您提供html multiselect示例的示例。

为您量身定做的Stackblitz Iam。
https://stackblitz.com/edit/angular-multi-select-example-itmvgc

HTML文件

 <select id="teacherSubjects"  multiple="multiple" required class="validate form-control" name="teacherSubjects" [(ngModel)]="teacherSubjects"
  (change)="onSelect($event)">
    <option style="display:none"></option>
    <option *ngFor="let x of myOptions" [value]="x">{{x.name}}</option>
  </select>

或

 <select id="teacherSubjects"  multiple required class="validate form-control" name="teacherSubjects" [(ngModel)]="teacherSubjects"
      (change)="onSelect($event)">
        <option style="display:none"></option>
        <option *ngFor="let x of myOptions" [value]="x">{{x.name}}</option>
      </select>

打字稿文件

teacherSubjects:any;
myOptions = [        
    { id: 1, name: 'Car brands', isLabel: true },
    { id: 2, name: 'Volvo', parentId: 1 },
    { id: 3, name: 'Honda', parentId: 1 },
    { id: 4, name: 'BMW', parentId: 1 },
    { id: 5, name: 'Colors', isLabel: true },
    { id: 6, name: 'Blue', parentId: 5 },
    { id: 7, name: 'Red', parentId: 5 },
    { id: 8, name: 'White', parentId: 5 }
];
onSelect(event){
    console.log("Value in 2",this.teacherSubjects);        
}

注意：-

我创建了示例变量，并在选择函数中使用。您可以更改您的方便性。而且iam在使用这条线的同时获取对象的孔值，

[value]="x"

您可以根据自己的选择访问，例如名称，ID等。

[value]="x.name"
[value]="x.id"

像这样

屏幕截图

希望对您有帮助。

使用HTML在ngForm中进行多重选择

1 个答案: