2017-02-02 10 views
1

У меня есть форма генерируется динамически пользователем: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 isplaying json моей формы, это все еще старый порядок, за исключением случаев, когда я начинаю изменять содержимое поля. В этом случае форма обновляется.

+0

Просто быстро догадка: '[dragulaModel] myForm.controls = '. message.controls' является одним из способов связывания. Можете ли вы использовать двустороннюю привязку здесь или событие для обновления вашей модели? – Riscie

+0

Я совершенно новый для angular2, что вы подразумеваете под двухсторонним связыванием с использованием '[(ngModel)]'? Странно, что когда я начинаю редактировать поле, все меняется в правильном порядке – Alexis

ответ

1

Итак, я нашел решение, не уверен, что это самое лучшее, и я совершенно новый для углового, но, по крайней мере, он работает.

Итак, я выяснил, что мне нужно найти способ испускать событие из формы.

В моей форме я есть на самом деле значение «порядок», соответствующий идентификатор в списке, так что я сделал следующее:

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