abpframework / abpframework/abp

Angular: User form is not mapping backend validation errors

Open
#10,926 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature priority:low ui-angular
Dominant language
C#
Stars
14.4k
Forks
3.7k
Avg merge
15h 32m
Merged PRs (30d)
106

Description

Hi! im adding validation errors to my app and i has an issue with validation in user module with creation of user with username: admin (or one existing). The problem is that validation error is showed in dialog (fine) but not is mapped to form field (username in this case). I'm missing something in api configuration? (I attached a gif to see the behaviour).

  • ABP Framework version: 4.4.4
  • Angular 12
  • EF Core

Steps to reproduce the problem

  1. Clone a clean project of abp using Angular UI
  2. Login in angular and go in user module
  3. Add a new user with username admin
  4. Validation error is showed in dialog but not mapped to form field
    ngx-validate

Second question

Exists a more automatic way to map backend errors to form field? I'm mapping errors like that:

request.subscribe(response => {
      this.getList.emit(true);
      this.close();
    }, (httpError: HttpErrorResponse) => {
      console.log(httpError);
      const { error } = httpError.error;
      const { validationErrors } = error;

      validationErrors.forEach(({ message, members }) => {
        members.forEach(member => {
          this.form.get(member).setErrors({ 'uniqueTopic': message });
        });
      });
});

Is like pretty much restrictive like im mapping well known validation error. In addition of before code, I need to add blueprint in themesharedmodule. But im searching for something more faster to map.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in the Angular user module by creating a user with the existing username admin, then inspect how the backend validation response reaches the form. Review the form and shared-module configuration referenced in the report. Done means the username field displays the backend validation error without restrictive per-error mapping.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, csharp
Domain
api, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.