显示和更新FormArray中的FormGroup [英] Display and update FormGroup inside FormArray

问题描述

我正在显示带有* ngFor的FormArray.我想做的是，当我在ngFor中单击一个项目时，用该项目的任务"属性填充该项目.

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:

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

Stackblitz: https://stackblitz.com/edit/angular-asevei-t5pm9u

推荐答案

您可以声明变量

control:FormControl

并在输入表单中使用Control

And use in your input formControl

<input [formControl]="control" />

只需点击

(click)="control=item.get('task')

但是我认为您想就地编辑".为此，您需要两个变量，通常我要去吸取formArray

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)
}

我们的.html就像

<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>

注意:要使用属性cdkDragDisable，您需要更新引用，在"@angular/cdk": "7.0.3"中您没有此属性，因此您也需要更新到Angular 9

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

看看如何在"i = selectedIndex"显示输入"并且禁用cdkDrag的情况下.当我们单击和拖动时，我们需要管理.为此，我使用变量dropping，该变量在您移动时为true，在删除时为false，此外，如果droping为true，则我们不做任何事情，(click)="!dropping && focus(i)"

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)"

好吧，函数focus将变量itemSelected放到行的值上并成为焦点.焦点需要在setTimeout中进行设置，以对Angular进行更改以显示输入

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()
    })
  }

最后，放置函数需要考虑到moveItemInArray函数正在考虑使用数组，而不是formArrays，所以

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
  }

您可以在此堆叠闪电战

这篇关于显示和更新FormArray中的FormGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！