[ngx-formly] Dynamically set Model Properties with Angular Formly Expressions

Formly has a nice mechanism called "expression properties". These are expressions in the form of a function callback or string expression that are evaluated at runtime. In this video we're going to explore how to leverage these expressions to set values on our data model.

 

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