如何使用在 angular 9 中包含数据数组的数据创建表单组？

Question

如何使用具有数据数组的数据创建表单组。还有如何保存绑定到该数据？

数据格式

{  
     id: 0,
     tenantId: 0, 
     qty: 0,
     dateInvoiced: '',  
     status: '', 
     services: 
     { 
        service1: false,
        service2: false,
        service3: false, 
        otherServices: '',
    }
}

如何使用服务数组创建表单组？

        var group: FormGroup = new FormGroup({
          id: new FormControl(''),
          tenantId: new FormControl(''),
          qty: new FormControl(''),
          dateInvoiced: new FormControl(''),
          status: new FormControl(''),
          services: new FormControl(''), //how to do services array here?
        });
        this.dynamicFormGroup = group

如何将服务保存在数据置顶？谢谢

  <mat-slide-toggle formControlName="services.service1">Service 1</mat-slide-toggle>
  <mat-slide-toggle formControlName="services.service2">Service 2</mat-slide-toggle>
  <mat-slide-toggle formControlName="services.service3">Service 3</mat-slide-toggle>

Answer 1

你没有数组，你需要创建一个 FormGroup，

  var group: FormGroup = new FormGroup({
      ...
      services: new FormGroup({
         service1:new FormControl(),
         service2:new FormControl(),
         service3:new FormControl(),
         otherServices:new FormControl()
      })
    });

并使用nested from groups

如果你想创建一个 formArray 使用

      services: new FormArray([
         new FormControl(),
         new FormControl(),
         new FormControl(),
         new FormControl()
      })

在嵌套的 FromGroup 中只需使用

<form [formGroup]="dynamicFormGroup">
  <input formControlName="id">
  ....
  <div formGroupName="services">
    <input formControlName='service1'>
      ...
  </div>
</form>

在 FormArray 中，我们需要考虑它是 FormControls 的 FormArray

<form [formGroup]="dynamicFormGroup">
  <input formControlName="id">
  ....
  <div formArrayName=="services">
   <div *ngFor="let control of dynamicFormGroup.get('services').controls;let i=index">
    <input [formControlName]="i">
   </div>
  </div>
</form>

如何使用在 angular 9 中包含数据数组的数据创建表单组？

How to create formgroup with a data that has an array of data in angular 9?

angular

formgroups