File

src/ngx-form-errors/src/ngx-errors.component.ts

Description

A Component that render form errors for a form controller attached to it.

The component is used as a directive on any renderable element (i.e. not on ng-container).

<input type="password" id="password" formControlName="password" />
<div ngxErrors="password"></div>

The component is used as a placeholder and all errors are added as siblings to the component. This approach enables support for content projected error directive, e.g. material's md-error.

The actual rendered content is based on the scoped template and not on the component

Implements

OnDestroy AfterContentInit

Metadata

changeDetection	`ChangeDetectionStrategy.OnPush`
selector	`[ngxErrors]`

Inputs

exclude

A list of error keys (e.g. "required") that will be excluded (i.e. will not render) This is a full-compare version of renderIf in NgxErrorsComponent

maxError

Maximum number of errors to display

ngxErrors

A string or a control that is the source of errors for this component.

When a string is used, a lookup is done on the first ControlContainer up the (DOM) tree. The ControlContainer is an @angular/forms abstract form control that acts as a container for other forms controls. It can be NgForm but can vary based on the forms module used. In a Template-Driven form it can be NgModelGroup (but most likely NgForm) and in a Reactive form it will usually be FormGroup.

Remember, the first container is the source.

Reactive Form:

The string email will be used to search for a control named email on the FormGroup userForm

<form [formGroup]="userForm">
   <label class="col-sm-2 form-control-label" for="email">Email</label>
   <div class="col-sm-10">
     <input type="email" id="email" class="form-control" formControlName="email" />
     <div ngxErrors="email"></div>
   </div>
</form>

Template-Driven Form:

The string email will be used to search for a control named email on the NgForm

<form #userForm="ngForm"
   <label class="col-sm-2 form-control-label" for="email">Email</label>
   <div class="col-sm-10">
     <input type="text" id="email" class="form-control" name="email"
     [(ngModel)]="model.email"
     required validateEmail>
     <div ngxErrors="email"></div>
   </div>
</form>

order

A list of error keys that defines the order of which errors appear.

The list can be partial, following errors will display in the order they were added.

renderIf

A predicate that allows filtering out error message right before they are displayed.

Constructor

constructor(ngxErrorsService: NgxErrorsService, control: ControlContainer, vcr: ViewContainerRef)

Legend

Html element

Component

Html element with directive