2

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

  // 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 时，它仍然是旧顺序，除非我开始更改字段的内容。在这种情况下，表格已更新。

4

1 回答 1

5

所以我找到了一个解决方案，不确定它是否是最好的，而且我对 Angular 还是很陌生，但至少它是有效的。

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

在我的表单中，我实际上有一个与列表中的 id 对应的值“order”，所以我做了以下操作：

    _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);
     }
  }
于 2017-02-02T12:00:46.033 回答