Skip to content
This repository has been archived by the owner on Feb 17, 2024. It is now read-only.
/ form-errors Public archive

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

Notifications You must be signed in to change notification settings

AngularClass/form-errors

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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? [email protected]

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published