@angularclass/form-errors
v2.0.0
Published
Angular 2 Form Errors - like ngMessages in AngularJS but for Angular 2
Downloads
17
Readme
AngularClass Form Errors
A component that is designed to show and hide messages based on the state of a key/value object.
Install
npm install @angularclass/form-errors --save
- Inputs
[errors]
: takes an object where the keys match the errors and the value is the message
- Attributes
control
: The control name to determine the errors
API
@Component({
selector: 'account',
directives: [
...ANGULARCLASS_FORM_ERRORS_DIRECTIVES // [ AcMatchControlValidator ]
]
});
<ac-form-errors control="username" [errors]="{'required': 'this is required'}"></ac-form-errors>
example
import { Component } from '@angular/core';
import { ANGULARCLASS_FORM_ERRORS_DIRECTIVES } from '@angularclass/form-errors';
@Component({
selector: 'account-edit',
directives: [
...ANGULARCLASS_FORM_ERRORS_DIRECTIVES
],
template: `
<div>
<p>
Account:
</p>
<form
#accountForm="ngForm"
(ngSubmit)="onUpdateProfile(accountForm.value, accountForm.valid)"
>
<div>
<label>
Username:
<input name="username" [(ngModel)]="username" required>
</label>
<ac-form-errors control="username" [errors]="{'required': 'username is required'}"></ac-form-errors>
</div>
<button>Submit</button>
</form>
</div>
`
})
export class AccountEditComponent {
accountForm = {
username: ''
};
onUpdateProfile(json, isValid) {
}
}
todo
- [ ] use ng-content for template driven forms
- [ ] by default use the control next to the directive
enjoy — AngularClass
Learn AngularJS, Angular 2, and Modern Web Development from the best. Looking for corporate Angular training, want to host us, or Angular consulting? [email protected]