如何解决如何使用反应形式的项目创建ng-select
我在不同的Web门户网站上进行了很多搜索，但仍然没有成功。 我们如何以反应形式创建ng-select。我想以反应形式创建以下html标签。以下代码段来自formGroup。
HTML：
<ng-select #ngSelect formControlName="searchCreteria"
[items]="people"
[multiple]="true"
bindLabel="name"
[closeOnSelect]="false"
[clearSearchOnAdd]="true"
bindValue="id"
(paste)="onPaste($event,i)"
(clear)="resetSearchCreteria(item)"
[selectOnTab]="true"
[closeOnSelect]="true">
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input id="item-{{index}}" type="checkbox"/> {{item.name | uppercase}}
</ng-template>
</ng-select>
原因：
我有一个搜索过滤器，其中基于ng-select下拉列表中选择的值将与项目绑定。因此，在不同的下拉值上，ng-select将具有不同的项。 例如，如果用户在下拉列表中选择“国家/地区”，则将显示ng-select formControl，所有国家/地区都具有约束力。以同样的方式，是否会根据下拉菜单的选择而变化。
请让我知道是否需要更多详细信息，我会尽力提供。
解决方法
我正在使用以下代码片段来解决此问题：
HTML：
<p>Select multiple elements using paste</p>
<div class="col-md-offset-2 col-md-4">
<!-- <select style="width:200px;" [ngModel]="selectedSearchFilter" (ngModelChange)="onChange($event)" name="sel3">
<option [ngValue]="i" *ngFor="let i of searchFilters">{{i.name}}</option>
</select> -->
<ng-select style="width:300px;" [items]="searchFilters"
[clearable]="false"
bindLabel="name"
bindValue="id"
[(ngModel)]="selectedSearchFilter"
(change)="onChange($event)">
</ng-select>
</div>
<br>
<form class="form-horizontal" [formGroup]="personalForm" (ngSubmit)="onSubmit()">
<div style="background-color: gainsboro">
<div formArrayName="other" *ngFor="let other of personalForm.get('other').controls; let i = index"
class="form-group">
<div [formGroup]="other">
<div class="form-group" class="row cols-md-12">
<span for="filterName">{{other.controls.filterName.value}}</span>
<ng-select #ngSelect formControlName="searchCreteria"
[items]="other.value.data"
[multiple]="true"
[virtualScroll]="true"
bindLabel="name"
[closeOnSelect]="false"
[clearSearchOnAdd]="true"
bindValue="id"
(paste)="onPaste($event,other,i)"
(clear)="removeCompletePanel(i)"
[selectOnTab]="true"
[closeOnSelect]="true" [(ngModel)]="selectedSearchCreteria[i]">
<!-- <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input [ngModelOptions]="{standalone: true}" [ngModel]="item$.selected" id="item-{{index}}" type="checkbox"/> {{item.name | uppercase}}
</ng-template> -->
<ng-template ng-option-tmp let-item="item" let-index="index">
<input [ngModelOptions]="{standalone: true}" [ngModel]="item.selected" id="item-{{index}}" type="checkbox"/> {{item.name | uppercase}}
</ng-template>
</ng-select>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" type="button"
(click)="onClearDataClick()">Clear Data</button>
<br>
<button class="btn btn-primary" type="button"
(click)="onShowSelectedItemsClick()">Show Selected items</button>
</form>
{{finalValues | json}}
TS：
import { Component,OnInit,ViewChildren,ElementRef } from "@angular/core";
import { DataService,Person } from "../data.service";
import { map } from "rxjs/operators";
import {
FormGroup,FormArray,FormControl,FormBuilder,Validators
} from "@angular/forms";
@Component({
selector: "multi-checkbox-example",templateUrl: "./multi-checkbox-example.component.html"
})
export class MultiCheckboxExampleComponent implements OnInit {
selectedSearchCreteria = [];
ngSelectCount = [];
personalForm: FormGroup;
searchFilters = [
{ name: "--Please Select Item--",id: -1 },{ name: "Country",id: 1 },{ name: "States",id: 2 },{ name: "Cities",id: 3 }
];
selectedSearchFilter = this.searchFilters[0].id;
constructor(
private dataService: DataService,private formBuilder: FormBuilder
) {}
ngOnInit() {
this.personalForm = this.formBuilder.group({
filter: new FormControl(null),other: this.formBuilder.array([])
});
}
addOtherSkillFormGroup(filterName: string): FormGroup {
let data = this.getDropData(filterName);
let groupData = {
filterName:[filterName],searchCreteria: [""],data: [data]
};
//groupData['data']=data;
return this.formBuilder.group(groupData);
}
onPaste(event: ClipboardEvent,controlData: any,i: any) {
let clipboardData = event.clipboardData;
let pastedData = clipboardData.getData("text");
// split using new line
var queries = pastedData.split(/\r\n|\r|\n/);
// iterate over each part and add to the selectedItems
queries.forEach(q => {
var cnt = controlData.value.data.find(
i => i.name.toLowerCase() === q.trim().toLowerCase()
);
if (cnt != undefined) {
this.selectedSearchCreteria[i] = [...this.selectedSearchCreteria[i],cnt.id];
}
});
let nodes: NodeListOf<HTMLElement> = document.querySelectorAll(
".ng-input input"
) as NodeListOf<HTMLElement>;
for (let i = 0; nodes[i]; i++) {
(nodes[i] as HTMLElement).blur();
}
}
onClearDataClick() {
(<FormArray>this.personalForm.get("other")).clear();
this.ngSelectCount.length = 0;
this.selectedSearchFilter = this.searchFilters[0].id;
this.selectedSearchCreteria.length = 0;
}
onChange(e) {
if (e.id != -1) {
var cnt = this.ngSelectCount.find(i => i === e.id);
if (cnt == undefined) {
(<FormArray>this.personalForm.get("other")).push(
this.addOtherSkillFormGroup(e.name)
);
this.selectedSearchCreteria.push([]);
this.ngSelectCount.push(e.id);
this.selectedSearchFilter = e.id;
}
} else {
(<FormArray>this.personalForm.get("other")).clear();
this.ngSelectCount.length = 0;
this.selectedSearchFilter = this.searchFilters[0].id;
this.selectedSearchCreteria.length = 0;
}
}
removeCompletePanel(e) {
(<FormArray>this.personalForm.get("other")).removeAt(e);
this.ngSelectCount.splice(e,1);
this.selectedSearchFilter = this.searchFilters[0].id;
this.selectedSearchCreteria.splice(e,1);
}
onShowSelectedItemsClick() {
let output:any = "";
(<FormArray>this.personalForm.get("other")).controls.forEach(function(formControl) {
formControl.value["searchCreteria"].forEach(q => {
var cnt = formControl.value.data.find(i => i.id === q);
//console.log(formControl.value["filterName"]+'--'+cnt.name);
output = output + formControl.value["filterName"]+'--'+cnt.name+','
});
});
alert(output);
}
getDropData(filterType: string) {
if (filterType == "Country") {
return [
{ id: 1,name: "India" },{ id: 2,name: "Switzerland" },{ id: 3,name: "Norway" },{ id: 4,name: "Macao" },{ id: 5,name: "Qatar" },{ id: 6,name: "Ireland" },{ id: 7,name: "United States" },{ id: 15,name: "United Kingdom" },{ id: 21,name: "United Arab Emirates" }
];
} else if (filterType == "States") {
return [
{ id: 1,name: "State 1" },name: "State 2" },name: "State 3" },name: "State 4" },name: "State 5" },name: "State 6" },name: "State 7" },name: "State 8" },name: "State 9" }
];
} else {
return [
{ id: 1,name: "City 1" },name: "City 2" },name: "City 3" },name: "City 4" },name: "City 5" },name: "City 6" },name: "City 7" },name: "City 8" },name: "City 9" }
];
}
}
/////////////////////////////
}
我认为我没有整理这两个答案的声誉，但我发现这个问题及其两个答案都具有指导意义：ng-select multi select checkbox with reactive forms in angular 6
,在反应形式的情况下， 可以为 FormGroup 使用 patchValue 内置函数。
示例： HTML：
<form [formGroup]="learnerForm">
<ng-select
[items]="managerList$ | async"
bindValue="id"
bindLabel="email"
placeholder="Manager"
formControlName="manager">
</ng-select>
</form>
TS：
this.learnerForm.patchValue({
manager: updatedID,});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
