修補動態數據以按角度形式重復鍵入

Question

我的目標是將外部json數據修補到包含FieldArrayType的表單。

說我有以下正式字段配置：

fields: FormlyFieldConfig[] = [
    {
      key: 'cars',
      type: 'repeat',
      fieldArray: {
        fieldGroupClassName: 'row',
        templateOptions: {
          btnText: 'Add',
        },
        fieldGroup: [
          {
            className: 'col-sm-4',
            type: 'input',
            key: 'type',
            templateOptions: {
              label: 'Type:'
            },
          },
          {
            type: 'input',
            key: 'name',
            className: 'col-sm-3',
            templateOptions: {
              label: 'Name:'
            },
          },
        ],
      },
    },
  ];

然后，我想將一些數據打補丁到這種重復類型：

  patchData() {
    let data = {
      "cars":[
        {"type":"Type1","name":"Name1"},
        {"type":"Type2","name":"Name2"}]
      };

    // Failure: Only the first car value is patched, the second car is not patched
    // (unless) 'Add' is clicked first, which is not intended.
    this.form.patchValue(data);
  }

問題在於，在表單的初始加載中，重復部分中僅存在一項。 因此，如果我將數據修補到包含兩個或兩個以上字段數組項的表單，則僅將第一項應用並存儲在模型中。

有沒有一種方法可以在修補數據之前以編程方式向FieldArray添加項目，以便模型接收數據？

注意：數據的長度可以變化。

請以以下stackblitz為例： https ://stackblitz.com/edit/angular-vfykhx

Answer 1

  constructor( private fb: FormBuilder ) patchData() { this.form=this.fb.group({ cars:this.fb.array([]) }); let data = { "cars":[ {"type":"Type1","name":"Name1"}, {"type":"Type2","name":"Name2"}] }; const fa = <FormArray>this.form.controls['cars']; data.cars.forEach((each)=>{ let tFormGroup:FormGroup=this.fb.group({ type:[each.type], name:[each.name] }); tFormGroup.patchValue(each); fa.push(tFormGroup); }) } 

  <form [formGroup]="form"> <div formArrayName="cars"> <div *ngFor="let car of form['controls'].cars;let i=index;" [formGroupName]="i"> <input ype="text" formControlName="type"> <input ype="text" formControlName="name"> </div> </div> </form>