Open Closed

Form extensions for Angular - edit field validation #9422


User avatar
0
Bryan-EDV created

Hi,

i understand that there are ways to delete and add fields on form via form extensions.

How about edit? I want to edit the validation of the username.

I've tried deleting the existing username prop and added a new custom usernameprop but am now having issues when i edit the form.

https://abp.io/docs/latest/framework/ui/angular/dynamic-form-extensions


5 Answer(s)
  • User Avatar
    1
    AI-Bot created
    Support Team ABP Agent

    To modify the validation of an existing field (such as the username) in an ABP Angular form using the Dynamic Form Extensions system, you should use a FormPropContributor to update the validation rules, rather than deleting and re-adding the property. This approach ensures the form remains consistent and avoids issues during editing.

    Here's how you can update the validation for the username field:

    1. Create a FormPropContributor function that locates the username property and updates its validators.
    import { Validators } from '@angular/forms';
    import { FormPropList } from '@abp/ng.theme.shared/extensions';
    import { IdentityUserDto } from '@volo/abp.ng.identity/proxy';
    
    export function usernamePropContributor(propList: FormPropList<IdentityUserDto>) {
      const usernameProp = propList.get('userName');
      if (usernameProp) {
        // Update validators as needed
        usernameProp.validators = () => [
          Validators.required,
          Validators.minLength(6), // Example: minimum length
          Validators.pattern(/^[a-zA-Z0-9_]+$/) // Example: alphanumeric and underscores only
        ];
      }
    }
    
    1. Register your contributor in the appropriate module:
    import { eIdentityComponents, IdentityUserFormPropContributors } from '@volo/abp.ng.identity';
    
    export const identityUserFormPropContributors: IdentityUserFormPropContributors = {
      [eIdentityComponents.Users]: [usernamePropContributor]
    };
    
    1. Pass the contributors to the module using the forLazy or forChild method:
    IdentityModule.forLazy({
      userFormPropContributors: identityUserFormPropContributors
    })
    

    This method updates the validation rules for the username field without removing and re-adding the property, which avoids issues with form editing.

    Sources:


    This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  • User Avatar
    0
    Bryan-EDV created

    [AI-Bot] said: const usernameProp = propList.get('userName'); if (usernameProp) { // Update validators as needed usernameProp.validators = () => [ Validators.required, Validators.minLength(6), // Example: minimum length Validators.pattern(/^[a-zA-Z0-9_]+$/) // Example: alphanumeric and underscores only ];

    validators is a read only property

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    Hi! Here's an approach you can follow:

    const userNameField = new FormProp<IdentityUserDto>({
      type: ePropType.String,
      name: 'userName',
      displayName: 'New Username',
      id: 'userName',
      autocomplete: 'new-username',
      validators: _ => [Validators.required, Validators.minLength(4)],
    });
    
    export function userCreateFormContributor(formProps: FormPropList<IdentityUserDto>) {
      const userNameIndex = formProps.indexOf('userName', (action, name) => action.name === name);
      formProps.dropByIndex(userNameIndex);
      formProps.addByIndex(userNameField, userNameIndex);
    }
    
    export const identityCreateFormContributors: IdentityCreateFormPropContributors = {
      [eIdentityComponents.Users]: [userCreateFormContributor],
    };
    
    export const identityEditFormContributors: IdentityEditFormPropContributors = {
      [eIdentityComponents.Users]: [userCreateFormContributor],
    };
    

    Then, configure your route like this:

    // app-routing.module
    ...
    {
      path: 'identity',
      loadChildren: () =>
        import('@volo/abp.ng.identity').then(m =>
          m.IdentityModule.forLazy({
            createFormPropContributors: identityCreateFormContributors,
            editFormPropContributors: identityCreateFormContributors,
          }),
        ),
    },
    ...
    

    Let me know if you need any further help!

  • User Avatar
    0
    Bryan-EDV created

    [sumeyye.kurtulus] said: Hi! Here's an approach you can follow:

    const userNameField = new FormProp<IdentityUserDto>({ 
      type: ePropType.String, 
      name: 'userName', 
      displayName: 'New Username', 
      id: 'userName', 
      autocomplete: 'new-username', 
      validators: _ => [Validators.required, Validators.minLength(4)], 
    }); 
     
    export function userCreateFormContributor(formProps: FormPropList<IdentityUserDto>) { 
      const userNameIndex = formProps.indexOf('userName', (action, name) => action.name === name); 
      formProps.dropByIndex(userNameIndex); 
      formProps.addByIndex(userNameField, userNameIndex); 
    } 
     
    export const identityCreateFormContributors: IdentityCreateFormPropContributors = { 
      [eIdentityComponents.Users]: [userCreateFormContributor], 
    }; 
     
    export const identityEditFormContributors: IdentityEditFormPropContributors = { 
      [eIdentityComponents.Users]: [userCreateFormContributor], 
    }; 
    

    Then, configure your route like this:

    // app-routing.module 
    ... 
    { 
      path: 'identity', 
      loadChildren: () => 
        import('@volo/abp.ng.identity').then(m => 
          m.IdentityModule.forLazy({ 
            createFormPropContributors: identityCreateFormContributors, 
            editFormPropContributors: identityCreateFormContributors, 
          }), 
        ), 
    }, 
    ... 
    

    Let me know if you need any further help!

    ah, thank you works now. i had a similar code by the id was in PascalCase , therefore it wasn't working.

    is it ok if i get my ticket allocation refunded for this please?

  • User Avatar
    2
    sumeyye.kurtulus created
    Support Team Angular Expert

    I'm glad to hear that the solution worked and everything is running smoothly now!

    Regarding your request to refund the ticket allocation, I'm afraid we can't process a refund in this case. Our policy is to refund tickets that are used to report a bug or a problem in our product.

    Regards.

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on June 20, 2025, 11:20