File
Metadata
| selector |
cmn-errors |
| styleUrls |
./error.component.scss |
| templateUrl |
./error.component.html |
|
when
|
Type : string | string[]
|
Default value : 'dirty'
|
|
|
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>
:host {
.errors {
display: inherit;
}
}
Legend
Html element with directive