Form extensions for Angular - edit field validation #9422

5 Answer(s)

• 

  1

  AI-Bot created 18 days ago

  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
      ];
    }
  }
  

  2. Register your contributor in the appropriate module:

  import { eIdentityComponents, IdentityUserFormPropContributors } from '@volo/abp.ng.identity';
  
  export const identityUserFormPropContributors: IdentityUserFormPropContributors = {
    [eIdentityComponents.Users]: [usernamePropContributor]
  };
  

  3. 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:

  • Dynamic Form (or Form Prop) Extensions for Angular UI

  ---

  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.

  Save Cancel
• 

  0

  Bryan-EDV created 18 days ago

  [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

  Save Cancel
• 

  0

  sumeyye.kurtulus created 18 days ago

  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!

  Save Cancel
• 

  0

  Bryan-EDV created 17 days ago

  [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?

  Save Cancel
• 

  2

  sumeyye.kurtulus created 12 days ago

  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.

  Save Cancel