ngx-mistakes

NgxMistakes

ngx-mistakes

A declarative validation errors module for reactive forms based on the module by Ultimate Angular

Overview

What is it?

The aim of this package is to be backwards compatible with ngx-errors, but solving the issues related to rxjs on Angular 7, since they seem to have abandoned the project. Just replace the name of the package in your imports and every should working like before.

Installation

npm i ngx-mistakes

Fallback for ngxErrors

Replace @ultimate/ngx-errors with ngx-mistakes

import { NgxErrorsModule } from 'ngx-mistakes';

@NgModule({ imports: [ NgxErrorsModule ] })

Form Group Arrays

You can use the more modern module, NgxMistakes. It has the same sintax, but it has support to handle validation in arrays of form groups

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ReactiveFormsModule } from '@angular/forms';

import { NgxMistakesModule } from 'ngx-mistakes';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule, NgxMistakesModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

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

@Component({
  selector: 'app-root',
  template: `
    <div [formGroup]="form">
      <input formControlName="name" />
      <div ngxErrors="name">
        <div ngxError="required" when="touched">
          The name is mandatory
        </div>
      </div>
      <div
        formArrayName="todos"
        *ngFor="let item of todosData.controls; let i = index"
      >
        <div [formGroupName]="i">
          <input formControlName="name" />
          <div ngxErrors="name" arr="todos" [idx]="i">
            <div ngxError="required" when="touched">
              The name is mandatory
            </div>
            <div ngxError="minlength" when="touched">
              The name must have at least 5 characters
            </div>
          </div>
          <input type="checkbox" formControlName="todo" />
          <div ngxErrors="todo" arr="todos" [idx]="i">
            <div ngxError="required" when="touched">
              The todo must be checked
            </div>
          </div>
        </div>
      </div>
    </div>
    <pre>{{ form.value | json }}</pre>
  `,
  styles: [
    `
      div[ngxErrors] {
        color: red;
      }
    `
  ]
})
export class AppComponent implements OnInit {
  form: FormGroup;

  get todosData() {
    return this.form.get('todos') as FormArray;
  }

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      name: ['List of Todos', [Validators.required]],
      todos: this.fb.array([
        this.fb.group({
          name: [
            'Lear Reactive Forms',
            [Validators.required, Validators.minLength(5)]
          ],
          todo: [false, [Validators.requiredTrue]]
        })
      ])
    });
  }
}

Documentation

Please, check the original documentation at: Ultimate Angular

License

MIT © Ricardo Sánchez Gregorio