时间戳

首页 > 解决方案 > 等到我的 FormlyFieldConfig 完成加载

javascript - 等到我的 FormlyFieldConfig 完成加载

问题描述

我遇到了一个问题，我试图在 UI 元素完全加载之前使用它们，从而导致未定义的异常。

表单在组件构造函数中加载，然后我调用 initializeElements 方法来处理 UI 元素。但是，正如我提到的，我得到了 null 和未定义的异常，因为我怀疑 loadForms() 方法在我去获取对象时没有完全完成。

我是 Angular 的新手，所以我不确定我可以在这里做什么来“等待”直到表单完全加载。我尝试将这些方法放在几个不同的生命周期挂钩中，但没有任何成功。

我有我的组件：

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

我的组件模板：

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

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

标签： javascriptangulartypescriptangular-formly

解决方案

看看生命周期：https ://angular.io/guide/lifecycle-hooks

如果您loadForms()在您的constructor()方法中使用，它不会等待视图加载。为此，如果您想确保视图完成加载，请使用ngAfterViewInit().

如果可能，请不要根据需要在构造函数、使用或上面文档中列出的任何生命周期钩子上加载数据或调用ngOnInit方法ngAfterViewInit()。

我不知道您是否使用过它们，如果您尝试过ngAfterViewInit()但它不起作用，请尝试*ngIf=fields在您的<form>标签上设置

希望能帮助到你。

推荐阅读