javascript - Foga dynamiska data till upprepat typ i angular-formly

Mitt mål är att patcha externa json-data till ett formulär som innehåller en FieldArrayType.

Säg att jag har följande Formly-fältkonfiguration:

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

Och senare vill jag patcha några data till denna repeat-typ:

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

Problemet är att vid den initiala inläsningen av formuläret finns endast ett objekt i upprepningssektionen. Därför, om jag patchar data till formuläret som innehåller två eller fler objekt i fältarrayen, tillämpas och lagras endast det första objektet i modellen.

Finns det ett sätt att programmässigt lägga till objekt i FieldArray innan man patchar datan så att datan tas emot av modellen?

Observera: Längden på datan kan variera.

Vänligen se följande stackblitz som exempel: https://stackblitz.com/edit/angular-vfykhx

Svar #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>