Wait until my FormlyFieldConfig has finished loading

Question

I am running into an issue where I'm trying to use UI elements before they've completely loaded, resulting in undefined exceptions.

The form is loaded in the components constructor, and then I call the initializeElements method to work with the UI elements. However, as I mentioned I'm getting null and undefined exceptions because I suspect the loadForms() method is not completely finished when I go to get the objects.

I'm new to angular, so I'm not sure what I can do here to 'wait' until the form is completely loaded. I've tried placing the methods in a few different lifecycle hooks but have not had any success.

I have my component:

export class UIComponent implements OnInit{
    form = new FormGroup({});
    model = {};
    fields: FormlyFieldConfig[];

    constructor(){
        this.fields = loadForm();

        this.initializeElements();
    };

    ngOnInit(){
    }; 


    initializeElements(){
        var overrides = this.form.get('Overrides'); // this is null on page load
        var firstNameObj = overrides.get('First Name'); // also null on page load
    };
}

My component template:

<form fxLayoutAlign="center center" [formGroup]="form">
    <formly-form [form]= "form" [fields]="fields" [model]="model"></formly-form>
</form>

The method loadForms:

export function loadForms(){
    return [
               {
                   'key': 'Overrides',
                   'fieldGroup': [{
                   'fieldGroupClassName': 'display-flex',
                   'fieldGroup': [{
                                     'key': 'First Name',
                                     'type': 'input',
                                     'value': 'New First Name',
                                     'templateOptions':{
                                          'label': 'First Name: '
                                      }
                                 },
                                     'key': 'Last Name',
                                     'type': 'input',
                                     'value': 'New Last Name',
                                     'templateOptions':{
                                          'label': 'Last Name: '
                                     }
                                 }]
                    }]
               }
          ]
}

Answer 1

Take a look to lifecycles: https://angular.io/guide/lifecycle-hooks

If you use loadForms() in your constructor() method, it won't wait the view to load. For this, if you want to make sure your view finished loading, use ngAfterViewInit().

Please, if it is possible, don't load your data or call methods on the constructor, use ngOnInit, ngAfterViewInit() or any of the lifecycle hooks listed on the docs above as needed.

I don't know if you used them, in case you tried with ngAfterViewInit() and it didn't work try setting an *ngIf=fields on your <form> tag

Hope it helps.