[英]Can we use Angular FormArray with angular2-multiselect dropdown?
For my usecase, i have to build a form in that we can dynamically add rows to the form columns.对于我的用例,我必须构建一个表单,以便我们可以动态地向表单列添加行。 I built that using Angular FormArray.
我使用 Angular FormArray 构建了它。 In that form, i have to add a dropdown, where user can select the task and can search for the specified task from the tasks list.
在该表单中,我必须添加一个下拉列表,用户可以在其中选择任务并可以从任务列表中搜索指定的任务。 So i tried with angular2-multiselect dropdown.
所以我尝试了 angular2-multiselect 下拉列表。 When i am adding a new row the previous row dropdown selected value is updating in the newly added row.
当我添加新行时,上一行下拉选择的值正在新添加的行中更新。 Can anyone help me on these?
谁能帮我解决这些问题?
Here i am including sample code with the error在这里,我包含了错误的示例代码
form.component.ts form.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';
@Component({
selector: 'app-reactive-form',
templateUrl: './reactive-form.component.html',
styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {
tasksDropDownSettings = {};
selectedTasks = [];
constructor(private fb: FormBuilder) { }
todoForm : FormGroup;
tasksData = [
{id: 1, taskName: "Go for Jogging"},
{id: 2, taskName: "Complete the work"},
{id: 3, taskName: "Catch the bus"},
{id: 4, taskName: "Leave by 6"}
]
ngOnInit() {
this.todoForm = this.fb.group({
tasks: this.fb.array([this.fb.group({task:''})])
})
this.tasksDropDownSettings = {
singleSelection: true,
enableSearchFilter: true,
text: "Select Primary Skill",
showCheckbox: true,
labelKey: 'skillName',
selectAllText:'Select All',
unSelectAllText:'UnSelect All'
}
}
get tasks() {
return this.todoForm.get('tasks') as FormArray;
}
addTask() {
this.tasks.push(this.fb.group({task:''}));
}
* form.component.html * * form.component.html *
<form [formGroup] = "todoForm">
<label> Add tasks here </label>
<div formArrayName = "tasks">
[enter image description here][1]
<div *ngFor="let item of tasks.controls; let taskIndex=index" [formGroupName]="taskIndex" (click) = "onClick(tasks.controls)">
<angular2-multiselect [data] = "tasksData"
[(ngModel)] = "selectedTasks"
[settings] = "tasksDropDownSettings"
formControlName="task">
</angular2-multiselect>
</div>
</div>
<button type = "submit" class = "btn btn-submit"> Save </button>
<button (click) = "addTask()"> Add Row </button>
</form>
<pre>{{ this.todoForm.value | json }}</pre>
You had to remove the [(ngModel)] since you are using reactive forms您必须删除 [(ngModel)] 因为您使用的是反应形式
<angular2-multiselect [data] = "tasksData"
[settings] = "tasksDropDownSettings"
formControlName="task">
</angular2-multiselect>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.