0

In the example below I have a Formly form wrapped in a ngFor loop.The last form model overwrites all the previous ones. How can I stop that behaviour?

Parent that host the form loop:

<div class="row">
  <div class="col" *ngFor="let test of sampleModels">

    <app-form [fields]="fields" [model]="test"></app-form>

  </div>
</div>

fields: FormlyFieldConfig[] = [
    {
      key: 'text1',
      type: 'input',
      templateOptions: {
        label: '1',
        placeholder: 'Formly is terrific!',
        required: true,
      },
    },
    {
      key: 'text2',
      type: 'input',
      templateOptions: {
        label: '2',
        placeholder: 'Formly is terrific!',
        required: true,
      },
    }
  ];

  sampleModels = [
    {
      "text1": "1",
      "text2": "2"
    },
    {
      "text1": "3",
      "text2": "4"
    },
    {
      "text1": "5",
      "text2": "6"
    }
  ];

App-Form The model displays correctly but the form is populated always with the last item in the loop.

{{ model | json }}
<hr>
<form [formGroup]="form" (ngSubmit)="submit()">
  <formly-form [model]="model" [fields]="fields" [options]="options" [form]="form"></formly-form>
  <button type="submit" class="btn btn-success submit-button">Submit</button>
</form>



  @Input() model: any;
  @Input() fields: any;
  public form = new FormGroup({});

  options: FormlyFormOptions = {
    formState: {
      awesomeIsForced: false,
    },
  };

  submit() {
    if (this.form.valid) {
      console.log(this.model);
    }
  }

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.