@angularclass/form-errors
npm i @angularclass/form-errors

@angularclass/form-errors

Angular 2 Form Errors: A component that is designed to show and hide messages based on the state of a key/value object. via @AngularClass

by AngularClass

2.0.0 (see all)License:Apache-2.0TypeScript:Built-In
npm i @angularclass/form-errors
Readme

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



AngularClass ##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

Downloads/wk

15

GitHub Stars

17

LAST COMMIT

6yrs ago

MAINTAINERS

2

CONTRIBUTORS

1

OPEN ISSUES

2

OPEN PRs

1
VersionTagPublished
2.0.0
latest
6yrs ago
No alternatives found
No tutorials found
Add a tutorial