javascript - Vänta tills min FormlyFieldConfig har slutfört laddningen

Jag stöter på ett problem där jag försöker använda UI-element innan de helt har laddats, vilket resulterar i odefinierade undantag.

Formuläret laddas i komponentens konstruktor, och sedan anropar jag metoden initializeElements för att arbeta med UI-elementen. Men, som jag nämnde, får jag null- och undefined-undantag eftersom jag misstänker att loadForms()-metoden inte är helt färdig när jag försöker hämta objekten.

Jag är ny på Angular, så jag är inte säker på vad jag kan göra här för att 'vänta' tills formuläret är helt laddat. Jag har försökt placera metoderna i några olika livscykelmetoder men har inte haft någon framgång.

Jag har min komponent:

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

Min komponentmall:

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

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

Svar #1

Ta en titt på livscykler: https://angular.io/guide/lifecycle-hooks

Om du använder loadForms() i din constructor()-metod kommer den inte att vänta på att vyn ska laddas. För detta, om du vill vara säker på att din vy har slutfört laddningen, använd ngAfterViewInit().

Vänligen, om det är möjligt, ladda inte dina data eller anropa metoder i konstruktorn, använd ngOnInit, ngAfterViewInit() eller någon av livscykelhakarna som listas i dokumentationen ovan efter behov.

Jag vet inte om du använde dem, om du testade med ngAfterViewInit() och det inte fungerade, försök att sätta ett *ngIf=fields på din <form>-tagg

Hoppas det hjälper.

Relaterade artiklar