How to fix "Cannot read property 'options' of undefined" in angular formly?

Question

I'm trying to use Formly in Angular 9 for some dynamicly configured forms. It was worked well with angular 8, but when I upgrade the project to angular 9, i had the following errors.

My component class:

export class CityFormComponent implements OnInit {

  editingCity?: City;
  loading: boolean;

  form = new FormGroup({});
  model = {};
  fields: FormlyFieldConfig[];

  constructor(
    private store: Store<fromApp.AppState>,
    public dialogRef: MatDialogRef<CityFormComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { id?: number, modelForm: any, }) { }


  ngOnInit() {
    if (this.data.modelForm) {
      this.fields = this.data.modelForm.fields;
      // console.log(this.fields);
    }

    if (this.data.id) {
      this.store.dispatch(new CityEditing(this.data.id));
    } else {
      this.store.dispatch(new CityCreating());
    }

    this.store.select('cities').subscribe(state => {
      this.loading = state.loading;
      if (state.selectedCityId > 0) {
        this.editingCity = state.cities.find(loc => loc.id === state.selectedCityId);

      } else {
        this.editingCity = {};
      }
    });
  }

//...
}

<form [formGroup]="form" (ngSubmit)="submit()">
  <formly-form [form]="form" [model]="editingCity" [fields]="fields"></formly-form>
  <button type="submit" [disabled]="!form.valid" mat-raised-button color="primary">Save</button>
</form>

Here u can see, I have my fields: FormlyFieldConfig[] from MAT_DIALOG_DATA (I get this form config from backend), and it looks like normal FormlyFieldConfig[]:

fields: [
0: {
className: ""
defaultValue: null
key: "name"
templateOptions: {label: "Название", placeholder: "", description: "", required: true, options: []}
description: ""
label: "Название"
options: []
placeholder: ""
required: true
type: "input"
validation: {messages: []}
messages: [],
},
]

At the same time, if i hardcode fields property by adding

this.fields = [
      {
        key: 'firstname',
        type: 'input',
      },
    ];

at the end of ngOnInit(), it'll work fine.

Have anybody any ideas how to fix it?

score 0 · Answer 1 · answered Jun 18 '20 at 22:58

0

the problem is with your data format which is coming from API. It contains keys with 0 with an array of objects. It should be in the following format.

    fields: [
     {
    className: ""
    defaultValue: null
    key: "name"
    templateOptions: {label: "Название", placeholder: "", description: "", required: true, options: []}
    description: ""
    label: "Название"
    options: []
    placeholder: ""
    required: true
    type: "input"
    validation: {messages: []}
    messages: [],
    }
    ]

You can still modify this array in the correct format using filter.
Ex-   const flattenFields = fields.filter(res=>{
            if(typeof res =='object'){
                return res;
            }
        });

This should fix your problem!

answered Jun 18 '20 at 22:58

Kamaal

61
5

unfortunately, not, that didnt fix the problem – Mocking Alchemist Jun 19 '20 at 04:02
Can you share your code on Stackblitz so I can assist you better! @MockingAlchemist – Kamaal Jun 19 '20 at 21:09
I guess this should be a correct answer, along side with map to remove property keys from your array: ngOnInit() { if (this.data.modelForm) { this.fields = this.data.modelForm.fields.map(field => field); // console.log(this.fields); // should print out: [ { ... } ]; NOT [ 0: { ... } ] } } – Tiberiu Mihai Oct 23 '20 at 20:05

score 0 · Answer 2 · answered Oct 01 '20 at 20:33

Here's how I've fixed it.

.html:

<formly-form #formlyForm [form]="form" [fields]="fields" [model]="model"></formly-form>

.ts:

form = new FormGroup({});

@ViewChild("formlyForm", { static: true })
formlyForm: FormlyForm;

resetForm() {
  this.form = new FormGroup({});
  if (this.formlyForm) {
    this.formlyForm.options.resetModel({});
  }
}

Hope it helps someone else as well.

How to fix "Cannot read property 'options' of undefined" in angular formly?

2 Answers2