angularngx-formly

Need to update input field label on runtime in ng-formly


Need to update input field label on runtime in ng-formly .

    {
      key: 'forename',
      type:'input',
      templateOptions: {
      label: 'Forename'}
      expressionProperties:{
        label:(model)=>//code to change label on runttime
       }
   }

expression properties not taking label. Is there any other way


Solution

  • To achieve this, you will need to use the expressionProperties and set the templateOptions.label to your desired label. Here is a simple example:

    import { Component } from '@angular/core';
    import { FormGroup } from '@angular/forms';
    import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';
    
    @Component({
      selector: 'formly-app-example',
      templateUrl: './app.component.html',
    })
    export class AppComponent {
      form = new FormGroup({});
      model: any = {};
      options: FormlyFormOptions = {};
      fields: FormlyFieldConfig[] = [
        {
          key: 'isApplying',
          type: 'toggle',
          templateOptions: {
            label: 'Change the label',
            description: 'Toggle Description',
            required: true,
          },
          expressionProperties: {
            'templateOptions.label':
              '`${model.userName || "User"}  is ${!model.isApplying ? "not": ""} changing the label`',
          },
        },
        {
          key: 'userName',
          type: 'input',
          templateOptions: {
            label: 'User Name',
          },
        },
      ];
    }    
    

    As per the docs, expressions allow you to dynamically change field properties. More information can be found over here.

    Hope that helps