Naboo's Podracing Misadventure

    @ngserveio/validation-messages
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.1 • Public • Published

    @ngserveio/validation-messages

    Find more at libraries and examples at NgServe.io.

    This library was generated with Nx.

    Purpose

    The validation messages project alleviates developers from writing bloated markup for validation messages through a the ngServeValidationDisplay directive.

    See the Video Tutorial on YouTube

    Angular Reactive Forms Validation with @ngserveio/validation-messages

    Running unit tests

    Run nx test shared-ui-validation-display to execute the unit tests.

    Configuration

    Import the module NgServeValidationDisplayModule into the consuming module.

    @NgModule({
      imports: [NgServeValidationDisplayModule],
    })
    export class SampleModule {}

    ValidationMessageService

    The ValidationMessageService ships with default validation messages.

    export const ValidationMessages: { [key: string]: string } = {
      required: '{{fieldName}} is required.',
      email: '{{fieldName}} is invalid.',
      minlength: 'Minimum length is {{requiredLength}}',
      maxlength: 'Maximum length is {{requiredLength}}',
      min: '{{fieldName}} is less than minimum value of {{min}}.',
      max: '{{fieldName}} exceeds maximum value of {{max}}.',
      uniqueEmail: '{{value}} is already taken',
      exists: '{{fieldName}} {{value}} does not exist',
      agreeToTerms: 'You must agree to our terms.',
      url: '{{fieldName}} has invalid url',
      alphanumeric: '{{fieldName}} must be alphanumeric characters.',
      unique: '{{fieldName}} exists and must be unique.',
      isNumeric: '{{fieldName}} must be a numeric value',
    };

    The validation messages consist of the key being a validation and string being a message template. The message template creates consistency for form validation messages.

    Each key maps to a key on a FormControl's errors property.

    The errors property implements a type of { [key:string]: any }, so validation errors can supply more information. e.g. min supplies the properties of min and actual.

    To override these messages, use the addMessages method on the ValidationMessgeService.

    Adding Messages

    import { ValidationMessageService } from '@ngserveio/validation-display';
    
    @NgModule({})
    export class SampleModule() {
      constructor(private validationMessageService: ValidationMessageService) {
        validationMessageService.addMessages({
          min: '{{fieldName}} must be less than {{min}}.  {{actual}} was entered',
          isBetween: '{{fieldName}} must be between {{min}} and {{max}}.',
          required: 'Please enter a {{fieldName}}.'
        });
      }
    }

    ValidationDisplayDirective

    The validation display directive alleviates the need to bloat html markup in form. In order to display the validation message, add the ngServeValidationDisplay providing the control and fieldName. The fieldName will be supplied as part of the message if the message template includes it.

    Component Markup

    <div [formGroup]="myForm">
      <label>Email</label>
      <input type="email" formControlName="email">
      <span [ngServeValidationDisplay]="emailControl" fieldName="Email">
    </div>

    Component Code

    @Component({
      template: './sample.component.html',
    })
    export class SampleComponent {
      public myForm = new FormGroup({
        email: new FormControl('', [Validators.required, Validators.email]),
      });
    
      public get emailControl(): AbstractControl {
        return this.myForm.get('email');
      }
    }

    Validators

    The following validators are also shipped in this package.

    emptyOrWhiteSpace

    Checks if the control has a value that isn't white space. This will return { required: true } if invalid, so it will use the required message template.

    isNumeric

    Checks if the value is numeric. Returns { isNumeric: true } using the isNumeric message template.

    requiredIf

    Uses a predicate check on the condition supplied and checks if controls' value is empty or whitespace.

    public sampleForm = new FormGroup({
      email: new FormControl('', [
        requiredIf((ctrl: AbstractControl) => {
          const siblingControl = ctrl.parent.get('sibling');
          return siblingControl.value;
        }
      ])
    });

    Install

    npm i @ngserveio/validation-messages

    DownloadsWeekly Downloads

    147

    Version

    4.1.1

    License

    MIT

    Unpacked Size

    68.4 kB

    Total Files

    33

    Last publish

    Collaborators

    • ngserve