npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-form-err

v12.0.0

Published

Angular library for displaying your form validation errors

Downloads

2

Readme

Description

Angular library for displaying your form validation errors

Reactive and template forms, customization of error display logic, customization of messages and variables in messages are supported.

Features

  • Support for reactive and templated forms
  • customize error display logic:
    • always
    • when typing
    • when you lose focus
    • when submitting a form
  • small markup
  • change messages to your liking, for localization messages
  • variable in messages, include specifics from validator (e.g. min length)

Demo

Installation

$ npm install ngx-from-err

Add the module to your application

@Module({
  imports: [
    BrowserModule,
    NgxFormErrModule,  // <- import
  ],
})
export class AppModule {
}

Usage

Template-driven form


<form>
  <label>Firstname</label>
  <input class="form-control" name="firstname" [(ngModel)]="name"
         placeholder="Enter your firstname"
         [required]="true"
         [minlength]="2"
         pattern="[a-z]*"
         #nameNgModel="ngModel">

  <ngx-form-err [control]="nameNgModel"></ngx-form-err>
</form>

Reactive form

Template


<form [formGroup]="userForm">

  <div class="form-group mb-3">
    <label>Firstname</label>
    <input class="form-control" placeholder="Enter your firstname" formControlName="name">
    <ngx-form-err [control]="userForm.controls.name"></ngx-form-err>
  </div>

  <div class="form-group">
    <label>Firstname</label>
    <input class="form-control" placeholder="Enter your lastname" formControlName="lastname">
    <ngx-form-err [control]="userForm.controls.lastname"></ngx-form-err>
  </div>

  <button class="btn btn-primary mt-3" type="submit">Submit</button>

</form>

Controller

import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  userForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.userForm = this.formBuilder.group({
      name: [null, [Validators.required, Validators.minLength(2), Validators.pattern(/[a-z]*/)]],
      lastname: [null, [Validators.required, Validators.maxLength(10), Validators.pattern(/[a-z -]*/)]],
    });
  }


}

Components

ngx-form-err

Component for displaying validation errors for one input

Inputs

| Prop | Type | Description | |------|------|-------------| | control | FormControl or NgModel | Input field controller, needed to track status and display validation errors | | mode | NgxFormErrViewMode | Type of logic for displaying errors, can display only the first validation error or a list of all validation errors | | showWhen | NgxFormErrViewLogic[] | When should validation errors be shown, an array of parameters |

Configurations

Module-level configuration

You can pass the config file when connecting the module to your application, The configuration object is of type NgxFormErrConfig

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgxFormErrModule.forRoot({
      mode: NgxFormErrViewMode.single,
      showWhen: [NgxFormErrViewLogic.formSubmitted, NgxFormErrViewLogic.touched]
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Configuration when using a component

You can override config options when using component
The names of the incoming parameters match the field name in the configuration


<ngx-form-err [control]="nameNgModel" mode="single" [showWhen]="['touched']"></ngx-form-err>

Error message customization

To customize validation error messages, reload NgxFormErrStorageFactory with your implementation, and be sure to implement from AbstractNgxFormErrStorageFactory.

The getErrorStorage method must be implemented, it must return an object of type ErrorGeneratorStorage

ErrorGeneratorStorage is an object whose keys are the name of the validator, and the value is a string or function to generate an error message. Depending on the type of validator, additional data will be passed as the first argument to the function to generate an error message.

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {AppComponent} from './app.component';
import {NgxFormErrModule, NgxFormErrStorageFactory} from 'ngx-form-err';
import {CustomFormErrStorageFactory} from "./custom-form-err-storage.factory";

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgxFormErrModule
  ],
  providers: [
    // Overloading the NgxFormErrStorageFactory standard class of your own implementation
    {
      provide: NgxFormErrStorageFactory,
      useClass: CustomFormErrStorageFactory
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}
import {Injectable} from '@angular/core';
import {AbstractNgxFormErrStorageFactory, ErrorGeneratorStorage} from 'ngx-form-err';

@Injectable()
export class CustomFormErrStorageFactory implements AbstractNgxFormErrStorageFactory {

  getErrorStorage(): ErrorGeneratorStorage {
    // Your logic for receiving and returning error messages
    return {
      required: 'My custom required error message',
      minlength: 'My min length message',
      maxlength: (data) => `The maximum length should be no more than ${data.requiredLength}`
    };
  }

}

Types and Interfaces

NgxFormErrConfig

| Prop | Type | Description | |------|------|-------------| | mode | NgxFormErrViewMode | Type of logic for displaying errors, can display only the first validation error or a list of all validation errors | | showWhen | NgxFormErrViewLogic[] | When should validation errors be shown, an array of parameters

NgxFormErrViewMode

Enum

| Key | Description | |------|-------------| |single| Show only the first validation error | | all | Show all validations errors|

NgxFormErrViewLogic

Enum, configuring error display logic

| Key | Description | |------|-------------| | immediately | Show validation errors immediately | | touched | Show validation errors only when the input has lost focus | | dirty | Show validation errors when changing the model | | formSubmitted | Show validation errors after form submission |

ErrorGeneratorStorage

A type that describes a storage object for validation error messages

export type ErrorGeneratorStorage = { [key: string]: ErrorGenerator };

ErrorGenerator

The type of single error message, can be a regular string or a function

export type ErrorGeneratorDynamic = (data: any) => string;
export type ErrorGenerator = ErrorGeneratorDynamic | string;