View Code? Open in Web Editor NEW

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

License: Apache License 2.0

TypeScript 100.00%

form-errors's Introduction

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

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]

Recommend Projects