[ngx-formly] Dynamically hide Form Controls with Angular Formly

时间:2020-01-09
本文章向大家介绍[ngx-formly] Dynamically hide Form Controls with Angular Formly,主要包括[ngx-formly] Dynamically hide Form Controls with Angular Formly使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

In this lesson we're going to learn how to dynamically hide a form control with Formly's hideExpressions. These expressions are evaluated automatically at runtime whenever a change on our form happens. As a result we can easily hide - say - the city dropdown field when no nation value has been selected yet.

    {
      key: 'cityId',
      type: 'select',
      templateOptions: {
        label: 'Cities',
        options: [],
      },
      expressionProperties: {
        'templateOptions.disabled': model => !model.nationId,
        'model.cityId': '!model.nationId ? null: model.cityId',
      },
      hideExpression: model => {
        return !model.nationId;
      },
      hooks: {
        onInit: (field: FormlyFieldConfig) => {
          field.templateOptions.options = field.form.get('nationId').valueChanges.pipe(
            startWith(this.model.nationId),
            switchMap(nationId => this.dataService.getCities(nationId)),
          );
        },
      },
    },

 

$flag 上一页 下一页

上一篇:PHP基础语法

下一篇:JS中的变量