CODEWITHSUNDEEP
angulartypescriptangular8ngdraggable
Mr.M
Mr.M

Reputation: 1480

formArray getting error in ng drag drop angular

Team

I am creating drag and drop for moving fields from my toolbar to panel

But I am getting error while dragging and drop in the form Here is the error which i am getting currently.

enter image description here

Here is my ts code

  ngOnInit(): void {
this.fields = localStorage.getItem('fields') ? JSON.parse(localStorage.getItem('fields')) : {}
this.getFieldData();
this.getCountryData();
this.myForm = this.formBuilder.group({
  arr: this.formBuilder.array([this.createItem()])
})
this.personalDetails = this.formBuilder.group({
  title: ['', Validators.required],
  firstName: ['', Validators.required],
  lastName: ['', Validators.required],
  guardianName: ['', Validators.required],
  guardianContactNo: ['', Validators.required],
  dob: ['', Validators.required],
  universityName: [''],
  middleName: ['']
});
this.contactDetails = this.formBuilder.group({
  address1: ['', Validators.required],
  address2: ['', Validators.required],
  apt: ['', Validators.required],
  countryData: ['', Validators.required],
  stateData: ['', Validators.required],
  cityData: ['', Validators.required],
  postalCode: [''],
  phoneNumberH: [''],
  phoneNumberO: [''],
  phoneNumberOff: [''],
  mobileNumber: [''],
  email: ['']
});

}

  onAnyDrop(e: any, formGroupName: string) {
console.log(e, formGroupName);
if (formGroupName === 'personalDetails') {
  this.addInput(this.personalDetails, e.fieldType, 'ABCED', false);
} else if (formGroupName === 'contactDetails') {
  this.addInput(this.contactDetails, e.fieldType, 'XYZABC', false);
}

}

addInput(fg, type: string, label: string, required: boolean = false): void {
const arrayControl = <FormArray>this.myForm.controls['formArray'];
let newGroup
switch (type) {
  case 'Text': {
    fg.array([{
      [label]: ['', required ? Validators.required : null]
    }])
    break;
  }
  case 'Number': {
    fg.array({
      [label]: [0, required ? Validators.required : null]
    });
    break;
  }
  default: {
    fg.array({
      [label]: ['', required ? Validators.required : null]
    });
    break;
  }
}
arrayControl.push(newGroup);

}

Here is my HTML

     <div class="fieldexplorer">
          <div class="sectionHeader_field">
                Field Explorer
          </div>
          <div draggable [dragData]="label" *ngFor="let label of labels;">
              <div class="hoverselect" style="padding: 8px;border: 1px solid black;">
                   <span [ngClass]="(label.fieldType=='Number'?'numberbefore':(label.fieldType=='List'?'listbefore':'radiobefore'))">
                   </span> {{label.labelName}}
              </div>
          </div>
       </div>

This is my Dropable area

<div class="row" [droppable] [dragHintClass]="'drag-hint'" (onDrop)="onAnyDrop($event, 'personalDetails')">
</div>
<div class="row" [droppable] [dragHintClass]="'drag-hint'" (onDrop)="onAnyDrop($event, 'contactDetails')">
</div>

Upvotes: 0

Views: 263

Answers (1)

N.F.
N.F.

Reputation: 4184

Modify addInput as below.

addInput(fg, type: string, label: string, required: boolean = false): void {
  let newControl: FormControl;
  switch (type) {
    case 'Text': {
      newControl = new FormControl('');
      break;
    }
    case 'Number': {
      newControl = new FormControl(0);
      break;
    }
    default: {
      newControl = new FormControl('');
      break;
    }
  }
  if (required) {
    newControl.setValidators([Validators.required]);
  }
  fg.addControl(label, newControl);
  const arrayControl = this.myForm.get('arr') as FormArray;  
  arrayControl.push(fg);
}

Upvotes: 1

Related Questions