Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature - Add global error message support #1054

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

steverhoades
Copy link

@steverhoades steverhoades commented Dec 22, 2019

This PR adds global message support, similar to functionality provided by ngx-formly.

The goals of this PR are as follows.

  • Reduce boilerplate by defining all Error Message in a global scope.
  • Allow for overriding a global message on a per control basis
  • Support dynamic server side error messages on a per control basis without the need for AsyncValidators (Does not replace AsyncValidators)
    .
  • Support function rendered messages

Example Usage:

// app.module.ts
providers: [
  {
    provide: DYNAMIC_GLOBAL_ERROR_MESSAGES,
    useValue: new Map([
      ['*', (label: string, error: string) => error] // show any undefined message
    ]),
  },
]

For the moment some additional "gymnastics" is required in order to get the controls to render the messages. See an example of that below.
//form.component.ts

 // errors comes from server call
const errors = {
    'fieldID' => {serverValidationError: 'Your field failed to pass validation' }
}
// find each control and set the errors on them.
const keys = Object.keys(errors);

keys.forEach((key) => {
  this.group.controls[key].setErrors(errors[key]);
});

// without the following the errors will not be displayed on the form.
this.formService.detectChanges(this.formComponent);

The model definition still requires that we "opt-in" to error messages.

new DynamicInputModel({
  id: 'myInput',
  label: 'My Input',
  value: '',
  errorMessages: {} //opt-in by creating an empty object
})

The result will be a control which shows the "catch-all" error message received from the server.

Room for improvements.

  • Automatically mark each control for re-render once an error has been detected
  • Have an explicit opt-in for showing error messages instead of relying on the existence of an errorMessages object on the model.

Use Cases:
Given that I am defining multiple forms
When I configure the validation rules
Then I should not have to repeat the errorMessages for each input in order for the messages to display on the control.

Given that I am defining a form
When I configure the validation rules
Then I should be able to process the error via a callback before returning the error message.

Given that I submit a form to the server
When the server returns a 422 response code with validation errors mapped to attribute name
Then show the error contextually on the form.

@codecov-io
Copy link

codecov-io commented Dec 22, 2019

Codecov Report

Merging #1054 into master will decrease coverage by 0.01%.
The diff coverage is 80%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #1054      +/-   ##
==========================================
- Coverage   90.49%   90.47%   -0.02%     
==========================================
  Files         170      170              
  Lines        2673     2678       +5     
  Branches      247      250       +3     
==========================================
+ Hits         2419     2423       +4     
  Misses        196      196              
- Partials       58       59       +1
Impacted Files Coverage Δ
...ms/core/src/lib/service/dynamic-form-validators.ts 100% <100%> (ø) ⬆️
...src/lib/service/dynamic-form-validation.service.ts 88.15% <77.77%> (-0.74%) ⬇️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4ea5ace...5941513. Read the comment docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants