在 FormArray 中显示和更新 FormGroup [英] Display and update FormGroup inside FormArray
问题描述
我正在显示一个带有 *ngFor 的 FormArray.我想要做的是当我点击 ngFor 中的一个项目时，用该项目的任务"属性填充.
另外，当我输入/更新输入的内容时，原始表单被更新/修补.
HTML:
<br><br><input formControlName="xxx"/><br><br>{{ myForm.value |json}}</表单>
Component.ts:
导出类 CdkDragDropSortingExample {提名数组 = [];我的表格:表格组；构造函数(私人FB:FormBuilder){this.myForm = this.fb.group({标题:['标题']，项目:fb.array([fb.group({完成:fb.control(false),任务:fb.control('设置闹钟'),位置:fb.control(0)}),fb.group({完成:fb.control(false),任务:fb.control('刷牙'),位置:fb.control(1)}),fb.group({完成:fb.control(false),任务:fb.control('淋浴'),位置:fb.control(2)}),fb.group({完成:fb.control(false),任务:fb.control('准备好'),位置:fb.control(3)}),fb.group({完成:fb.control(false),任务:fb.control('吃早餐'),位置:fb.control(4)})])})}更新输入(项目){控制台日志(项目)；}}Stackblitz:https://stackblitz.com/edit/angular-asevei-t5pm9u
你可以声明一个变量
control:FormControl并在您的输入 formControl 中使用
只需点击
(click)="control=item.get('task')但我认为您想就地编辑".为此，您需要两个变量，通常我会为 formArray 制作一个 getter
itemSelected:number=-1;丢弃:布尔值=假获取项目(){return (this.myForm.get('items') as FormArray)}我们的 .html 就像
</表单>
注意:要使用属性 cdkDragDisable 你需要更新你的引用，在 "@angular/cdk": "7.0.3" 你没有这个属性，所以你也需要更新到 Angular 9
看看如何，如果i=selectedIndex"显示输入"并且禁用了 cdkDrag.当我们点击和想要拖动时，我们需要管理.为此，我使用变量dropping，当你移动时为真，当丢弃时为false，此外，如果正在丢弃，我们什么都不做，(click)="!dropping && focus(i)"
好吧，函数focus把变量itemSelected放到行的值上，使焦点.焦点需要在 setTimeout 中进行以更改 Angular 以显示输入
focus(i:number){this.itemSelected=isetTimeout(()=>{this.input.nativeElement.focus()})}最后是 drop 函数，需要考虑到函数 moveItemInArray 正在考虑处理数组，而不是 formArrays，所以
drop(event: any) {const array=this.items.value//获取formArray的值moveItemInArray(array, event.previousIndex, event.currentIndex);//移动值array.forEach((x:any,i:number)=>x.position=i)//重新计算位置this.items.setValue(array)//创建一个setValue}您可以在 这个堆栈闪电战
I am displaying a FormArray with an *ngFor. What i am trying to do is when i click on an item in the ngFor, to populate the with that items 'task' property.
Additionally, when i type/update the contents of input, the original form is updated/patched.
HTML:
<form [formGroup]="myForm">
<div [id]="i"
class="example-box"
*ngFor="let item of myForm.get('items').controls; let i=index;"
(click)="updateInput(item)">
{{item.value.task}} to be
</div>
<br>
<br>
<input formControlName="xxx" />
<br>
<br>
{{ myForm.value | json}}
</form>
Component.ts:
export class CdkDragDropSortingExample {
nominatedArray = [];
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
title: ['title'],
items: fb.array([
fb.group({
completed: fb.control(false),
task: fb.control('Set Alarm'),
position: fb.control(0)
}),
fb.group({
completed: fb.control(false),
task: fb.control('Brush teeth'),
position: fb.control(1)
}),
fb.group({
completed: fb.control(false),
task: fb.control('Shower'),
position: fb.control(2)
}),
fb.group({
completed: fb.control(false),
task: fb.control('Get ready'),
position: fb.control(3)
}),
fb.group({
completed: fb.control(false),
task: fb.control('Have breakfast'),
position: fb.control(4)
})
])
})
}
updateInput(item) {
console.log(item);
}
}
Stackblitz: https://stackblitz.com/edit/angular-asevei-t5pm9u
you can declare a variable
control:FormControl
And use in your input formControl
<input [formControl]="control" />
Simply on click
(click)="control=item.get('task')
But I think you want to "edit in place". For this you need two variables and as usually I go to make a getter to the formArray
itemSelected:number=-1;
dropping:boolean=false
get items()
{
return (this.myForm.get('items') as FormArray)
}
Our .html is like
<form [formGroup]="myForm">
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div [id]="i" class="example-box"
[cdkDragDisabled]="itemSelected==i"
(cdkDragDropped)="dropping=false"
(cdkDragMoved)="dropping=true;itemSelected=-1"
*ngFor="let item of items.controls; let i=index;" cdkDrag>
<span *ngIf="itemSelected!=i" style="cursor:text"
(click)="!dropping && focus(i)" >
{{item.value.task}} to be
</span>
<input #input *ngIf="itemSelected==i" [formControl]="item.get('task')"
(blur)="itemSelected=-1">
</div>
</div>
</form>
NOTE: to use the property cdkDragDisable you need updated your references, in "@angular/cdk": "7.0.3" you has not this property, so you need update to Angular 9 too
See how, if "i=selectedIndex" it's showed the "input" and the cdkDrag is disabled. We need mannage when we click and when we want to drag. for this, I use the variable dropping that is true when you move and false when dropped, moreover, we make nothing if is dropping is true, the (click)="!dropping && focus(i)"
Well, the function focus put the variable itemSelected to the value of the row and make the focus. The focus need make in a setTimeout to give a change to Angular to show the input
focus(i:number)
{
this.itemSelected=i
setTimeout(()=>{
this.input.nativeElement.focus()
})
}
Finally, the drop function, need take account that the function moveItemInArray is thinking to work with arrays, not with formArrays, so
drop(event: any) {
const array=this.items.value //get the value of the formArray
moveItemInArray(array, event.previousIndex, event.currentIndex); //move the value
array.forEach((x:any,i:number)=>x.position=i) //recalculate the position
this.items.setValue(array) //make a setValue
}
You can see in this stackblitz
这篇关于在 FormArray 中显示和更新 FormGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
