ngx-dnd icon indicating copy to clipboard operation
ngx-dnd copied to clipboard

cant sort FormArray

Open mm580486 opened this issue 6 years ago • 0 comments

hi guys, are there any plans or documentation to be able to sort form array(almost) i found this https://github.com/swimlane/ngx-dnd/issues/51 issues but not working for me

social.component.html

<form [formGroup]="socialForm" novalidate (ngSubmit)="save(socialForm)">
    <div formArrayName="links" (drop)="dropped($event)" [model]="socialForm.controls" ngxDroppable id="link-list-group" class="link-list-group">
       <div class="link" 
       ngxDraggable
        [model]='link'
    *ngFor="let link of socialForm.controls.links.controls; let i=index">
        <div class="link-body" [formGroupName]="i">
        <div class="link-type">
                    <select name="" formControlName="link_type" id="">
                        <option disabled>نوع لینک را انتخاب کنید</option>
                        <option value="link">لینک</option>
                        <option value="pay">صفحه پرداخت</option>
                        <option value="button">دکمه تماس (ایمیل یا تلفن)</option>
                    </select>
            </div>
            <br>
            <div class="link-title">
                <input type="text" formControlName="title" name="" placeholder="عنوان" id="">
            </div>
<br>
            <div class="link-url">
                    <input type="text" formControlName="url" name="" placeholder="لینک" id="">
            </div>
        </div>   
            <div class="link-dots">
                    <i class="zmdi zmdi-view-toc"></i>
            </div>
            <div class="link-actions">
                    <i class="zmdi zmdi-delete" *ngIf="socialForm.controls.links.controls.length > 1" (click)="removeLink(i)"></i>
                    <i class="zmdi zmdi-chart"></i>
            </div>
       </div>


       
       <button type="submit" [disabled]="!socialForm.valid">Submit</button>


    </div>
</form>

social.component.html

public socialForm: FormGroup;
 identify: string;
 link_loader = false;
 public links: any;
 public lines: any;
 public link: any;
 constructor(
   public socialService: SocialService,
   public userService: UserService,
   private route: ActivatedRoute,
   private formBuilder: FormBuilder,
   private router: Router
 ) {
   this.socialForm = this.formBuilder.group({
     links: this.formBuilder.array([
       this.initLink(),
      ]),
     'domain': [''],
     'theme_id': [],
     'token': [this.userService.get_db_authentication_token()]
   });
  }
 dropped(event) {
   const linesCopy = [];
   this.lines = this.socialForm.get('links') as FormArray;
   for (const line of this.lines.controls) {
       linesCopy.push(line.value);
   }
   console.log(linesCopy);
   console.log(this.lines.value);
   this.lines.reset(linesCopy);
}

error ERROR TypeError: sourceModel.indexOf is not a function

Getting this error in Angular 5

mm580486 avatar Jul 07 '18 11:07 mm580486