### File

`projects/commons/src/lib/elements/errors/components/error.component.ts`

### Metadata

selector | `cmn-errors`
styleUrls | `./error.component.scss`
templateUrl | `./error.component.html`

### Index

###### Inputs
name when

### Inputs

name
Type : `string`
Defined in projects/commons/src/lib/elements/errors/components/error.component.ts:10

when
Type : `string | string[]`
Default value : `'dirty'`
Defined in projects/commons/src/lib/elements/errors/components/error.component.ts:11

    import { Component, Input } from '@angular/core';

    @Component({
        selector: 'cmn-errors',
        templateUrl: './error.component.html',
        styleUrls: [ './error.component.scss' ],
    })

    export class ErrorComponent {
        @Input() public readonly name: string;
        @Input() public readonly when: string | string[] = 'dirty';
    }

    <div class="errors"
         [ngxErrors]="name"
         #error="ngxErrors">
        <small class="has-text-danger"
               ngxError="required"
               [when]="when">
            This field is required
        </small>
        <small class="has-text-danger"
             ngxError="minlength"
             [when]="when">
            Min length is {{ error.getError('minlength')?.requiredLength }}
        </small>
        <small class="has-text-danger"
               ngxError="password"
               [when]="when">
            The password should contain a lowercase letter, a capital letter, a number and a special character
        </small>
        <small class="has-text-danger"
               ngxError="confirm"
               [when]="when">
            This field is not equal to {{ error.getError('confirm')?.formName }}
        </small>
        <small class="has-text-danger"
               ngxError="email"
               [when]="when">
            This email is not valid
        </small>
    </div>

`./error.component.scss`

    :host {
        .errors {
            display: inherit;
        }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""