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

 

Related Posts

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注