Question

我有一个由用户动态生成的表单：

  // this._fb is a FormBuilder
  ngOnInit():void {
    this.myForm = this._fb.group({
      message: this._fb.array([
      ])
    });

生成的json类似于

{
  "message": [
    {
      "type": 1,
      "value": "first message",
    },
    {
      "type": 1,
      "value": "second message",
    }
  ]
}

我添加了ng2-dragula指令以更改消息顺序

<form [formGroup]="myForm">
  <div formArrayName="message">
    <div [dragula]='"bag-one"' [dragulaModel]='myForm.controls.message.controls'>
      <div *ngFor="let c of myForm.controls.message.controls; let i=index" class="panel panel-default" >
        <div class="panel-body" [formGroupName]="i">
          <label>value</label>
          <input type="text" class="form-control" formControlName="value">
        </div>
      </div>
    </div>
  </div>

拖动功能运行良好，但是当我显示表单的json时，它仍然是旧顺序，除非我开始更改字段的内容。在那种情况下，表格会更新。

Answer 1

所以我找到了一个解决方案，不确定它是最好的，而且我对角度很新，但至少它起作用了。

所以我弄清楚我需要找到一种从表单中发出事件的方法。

在我的表格中，我实际上有一个价值＆＃34;订单＆＃34;对应于列表中的id，所以我做了以下内容：

    _dragulaService.dropModel.subscribe((value:any) => {
      console.log(value);
      this.onDropModel(value.slice(1));
    });
  }

   private onDropModel(args:any):void {
     for (let i = 0; i < (<FormArray>this.myForm.get('message')).length; ++i) {
        (<FormArray>this.myForm.get('message')).at(i).patchValue("order", i);
     }
  }

ng2-dragula和动态形式没有直接同步

1 个答案: