[ngx-formly] Dynamically disable a Form field with Angular Formly

Ever had to disable a form control based on the value of another form control? If your city dropdown field is filtered based on the current nation dropdown value, it does not make sense to allow the user to select a city if the nation has not been chosen yet. Right? Let's see how to implement that with Formly.

 

{
      key: 'cityId',
      type: 'select',
      templateOptions: {
        label: 'Cities',
        options: [],
      },
      expressionProperties: {
        'templateOptions.disabled': model => !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)),
          );
        },
      },
    },