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

ng2-form-control-errors

v1.0.1

Published

Angular's components and directives for showing errors of form-controls

Downloads

3

Readme

ng2-form-control-errors

Coverage Status Build Status

Angular's components and directives for showing errors of form-controls. Use it alongside ReactiveForms.

Installation

To install this library, run:

$ npm install ng2-form-control-errors --save

Integration

Should work out of the box with webpack, respectively angular-cli. All you need to do is to include Ng2FormControlErrorsModule:

import { Ng2FormControlErrorsModule } from 'ng2-form-control-errors';

@NgModule({
  imports: [
    ...
    Ng2FormControlErrorsModule
  ],
  ...
})
class AppModule {}

Usage

Directive

In your template you may add the ng2FceReflectClasses directive to the input elements who contains FormControl directives e.g.:

  <div ng2FceReflectClasses class="form-group">
    <label class="col-md-2 control-label">Name</label>

    <div class="col-md-10">
      <input formControlName="name" class="form-control" type="text" placeholder="Name">
    </div>
  </div>

This way the elements with the ng2FceReflectClasses directive will have by default (depending on the validation state of the input element) the valid, invalid and touched classes of the input element who contains FormControl directives. You can customize these classes in two ways:

  • By setting the validCssClass, invalidCssClass and touchedCssClass properties of the FormControlErrorsConfigService. This values will be used globally.
  • By adding the attributes ng2FceValidClass, ng2FceInvalidClass and ng2FceTouchedClass and setting their values to corresponding classes. If present, the values of these attributes will be used instead of the properties of the FormControlErrorsConfigService.
  <div ng2FceReflectClasses class="form-group"
   ng2FceValidClass="formControlOK"
   ng2FceInvalidClass="formControlWithError"
   ng2FceTouchedClass="formControlWasTouched">
    ...
  </div>

If you have several formControl children inside the element with this directive, you can specify the name of the formControl you want to reflect his clasess as the value of the directive e.g.:

<div ng2FceReflectClasses="age" class="form-group">
  <div class="row">
    <label class="col-md-2 control-label">Name</label>
      <div class="col-md-10">
        <input formControlName="name" class="form-control" type="text" placeholder="Name">
      </div>
  </div>
  <div class="row">
    <label class="col-md-2 control-label">Age</label>
    <div class="col-md-10">
      <input id="age" formControlName="age" class="form-control" type="number" placeholder="Age">
    </div>
  </div>
</div>

Service

By injecting FormControlErrorsConfigService in your component you can customize:

  • errorCssClass: the css class applied to error messages shown by the ng2-fce-errors component. Default css class is help-block
  • messages: the default messages of validation errors.
  • validCssClass, invalidCssClass and touchedCssClass: default CSS classes for the host element of ng2FceReflectClasses directive.

Component

In your template you may add the ng2-fce-errors component and this will show error messages depending on validation state of the FormControl it points e.g.:

@Component({
  selector: 'app-root',
  template: `
  <form [formGroup]="myForm" class="form-horizontal" novalidate>
    <div class="form-group">
      <label class="col-md-2 control-label">Name</label>
  
      <div class="col-md-10">
        <input formControlName="name" class="form-control" type="text" placeholder="Name">
        <ng2-fce-errors [source]="myForm.get('name')"></ng2-fce-errors>
      </div>
    </div>
  </form>`
})
export class AppComponent implements OnInit {

  myForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private fceMessages: MessagesService) { }

  ngOnInit(): void {
    this.fceMessages.messages.required = 'Please specifiy this';
    this.fceMessages.errorCssClass = 'help-block';
    this.myForm = this.fb.group({
      'name': ['', [Validators.required, Validators.maxLength(10)]]
    });
  }

}

The ng2-fce-errors component has three properties:

  • source: holds the FormControl object to validate.
  • onlyFirst: optional boolean value to only show the first validation error message.
  • messages: an optional object with ErrorMessages interface who holds validation as key and a string as the message for that validation error. The supplied messages here will be used instead of messages in MessagesService.

Example app

The demo subfolder contains a project created with angular-cli that has been adapted to showcase the functionality of ng2-form-control-errors. Run the demo app by executing the following command in the project root directory:

$ npm run demo

This will perform the following steps:

// Change into the example website folder
cd demo/
// Install the demo website's dependencies
npm install
// Run the server
ng serve

License

MIT ©