NG2-dragula和動態形式沒有同步直接

我具有由用戶動態地生成的一種形式：NG2-dragula和動態形式沒有同步直接

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

拖動功能很好地工作，但是當我d正在顯示我的表單的json，它仍然是舊的順序，除非我開始更改字段的內容。我在那種情況下更新表格。

來源

2017-02-02 Alexis

只是快速猜測：'[dragulaModel] ='myForm.controls。 message.controls''是單向綁定。你可以使用這裏的雙向綁定或者一個事件來更新你的模型嗎？ – Riscie

我對angular2很陌生你是什麼意思的雙向綁定使用'[（ngModel）]'？奇怪的是，當我開始編輯一個字段時，所有內容都會更改爲正確的順序 – Alexis

所以我找到了一個解決方案，不知道它是最好的，我很新的角度，但至少它的工作。

所以我想通了，我需要找到一種方式來從窗體發出一個事件。

在我的形式其實我也值「命令」所對應的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); 
    } 
    }

來源

2017-02-02 12:00:46 Alexis

NG2-dragula和動態形式沒有同步直接

回答

相關問題