[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)),
          );
        },
      },
    },