在FormArray中显示和更新FormGroup

Question

我正在显示一个带有*ngFor的FormArray。我想做的是当我点击ngFor中的一个项目时，用该项目的'task'属性来填充。

此外，当我键入更新输入的内容时，原表单也会被更新。

HTML.Component.ts：当我点击ngFor中的项时，会弹出该项的'task'属性，另外，当我键入更新输入内容时，原表单会被更新。

<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.comeditangular-asevei-t5pm9u。

Answer 1

你可以声明一个变量

control:FormControl

并在你的输入表单控件中使用

<input [formControl]="control" />

只需点击

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

但我认为你想要 "原地编辑"。为此，你需要两个变量，通常情况下，我去给formArray做一个getter

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。

看，如果 "i=selectedIndex"，它显示的是 "输入"，而cdkDrag被禁用。为此，我使用了变量dropping，当你移动时为真，而当下降时为假，此外，如果下降为真，我们什么都不做。(click)="!dropping && focus(i)"

好吧，函数focus把变量itemSelected放到行的值上，然后进行聚焦。聚焦需要在一个setTimeout中进行，以给Angular显示输入的变化。

  focus(i:number)
  {
    this.itemSelected=i
    setTimeout(()=>{
      this.input.nativeElement.focus()
    })
  }

最后，drop函数，需要考虑到函数moveItemInArray是想着用数组来工作，而不是用formArrays，所以

  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
  }

你可以看到，在 这场突击赛