Angular formArray在ng拖放角度中获取错误

团队

我正在创建拖放，以便将字段从工具栏移动到面板

但我在拖放表单时出错，这里是我当前遇到的错误

这是我的ts代码

  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: ['']
});

}

}

addInput（fg，类型：string，标签：string，必需：boolean=false）：void{
const arrayControl=this.myForm.controls['formArray']；
让新组
开关（类型）{
案例“文本”：{
fg.阵列([{
[标签]：[''，必需？验证器。必需：空]
}])
打破
}
案件编号：{
fg.阵列({
[标签]：[0，必需？验证器。必需：null]
});
打破
}
默认值：{
fg.阵列({
[标签]：[''，必需？验证器。必需：空]
});
打破
}
}
arrayControl.push（新组）；

}

这是我的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>

野外勘探
{{label.labelName}

这是我的可降落区

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

---

修改

添加
，如下所示

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

请提供onAnyDrop的代码。
onAnyDrop
@N.F。我添加了onAnyDrop代码。还请检查您在
addInput
中尝试执行什么操作？您是否正在尝试将名为
label
的新FormControl添加到
this.personalDetails
或
this.contactDetails
中，并将其添加到
this.myForm.arr
？@N.F.您是对的。谢谢您的回答，只想了解您删除此部分[标签]的原因：[''，必需的？验证器。必需的：null]该零件适用于所有
类型
。它们将在
切换后完成。
。非常感谢您，不会出现错误。我这里还有一个查询，我正在尝试拖动和rop字段拖动工作非常好，但drop未按预期工作。我正在使用ng drag drop。您是否可以在聊天室中使用一段时间请我进一步解释这是另一个问题。我建议你发一个新问题。
<div class="row" [droppable] [dragHintClass]="'drag-hint'" (onDrop)="onAnyDrop($event, 'personalDetails')">
</div>
<div class="row" [droppable] [dragHintClass]="'drag-hint'" (onDrop)="onAnyDrop($event, 'contactDetails')">
</div>

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