Как исправить ошибку «Невозможно прочитать параметры свойства undefined» в angular формально?

Question

Я пытаюсь использовать Formly в Angular 9 для некоторых динамически настраиваемых форм. Он хорошо работал с angular 8, но когда я обновил проект до angular 9, у меня были следующие ошибки.

Мой класс компонента:

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>

Здесь вы видите, у меня есть fields: FormlyFieldConfig[] из MAT_DIALOG_DATA (я получаю эту конфигурацию формы из бэкэнда), и он выглядит как обычный 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: [],
},
]

В то же время, если я жестко закодирую свойство полей, добавив

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

в конце ngOnInit (), все будет работать нормально.

Есть у кого-нибудь идеи, как это исправить?

Answer 1

проблема в формате ваших данных, которые поступают из API. Он содержит ключи с 0 с массивом объектов. Он должен быть в следующем формате.

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

Это должно решить вашу проблему!