AngularClass Form Errors
A component that is designed to show and hide messages based on the state of a key/value object.
1.x.x uses the old form api
2.x.x uses the new forms api
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 { FORM_PROVIDERS, FORM_DIRECTIVES } from '@angular/common';
import { ANGULARCLASS_FORM_ERRORS_DIRECTIVES } from '@angularclass/form-errors';
@Component({
selector: 'account-edit',
providers: [
...FORM_PROVIDERS
],
directives: [
...FORM_DIRECTIVES,
...ANGULARCLASS_FORM_ERRORS_DIRECTIVES
],
template: `
<div>
<p>
Account:
</p>
<form
#accountForm="ngForm"
(ngSubmit)="onUpdateProfile(accountForm.value, accountForm.valid)"
>
<div>
<label>
Username:
<input ngControl="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? patrick@angularclass.com