Difference between revisions of "AngularJS form"

Revision as of 12:03, 2 January 2017

The AngularJS framework provides support for HTML forms.

Working with forms

Use ngmodel to model to bind to an object on component.

Bind to click event and emit it.

Example

import { Component } from 'angular2/common';
import { FORM_DIRECTIVES } from 'angular2/common';
import { MATERIAL_DIRECTIVES } from 'ng2-material/all';

@Component ({
 selector: 'some-form',
 template: `
  <div>
   <form #userForm="ngForm" #nameGroup="ngForm">
    <div ngControlGroup="name" #nameGroup="ngForm">
     <md-input-container [class.err]="!firstName.valid">
      <label>First Name</label>
      <input required md-input [(ngModel)]="user.firstName" #firstName="ngForm"
        placeholder="Enter first name"
        class="mdl-textfield__input" type="text">
     </md-input-container>
     ... etc....
    </div>
   </form>
  <div class="mdl-card__actions">
   <button type="submit" (click)="cancelled.emit(selectedItem)"
    class="mdl-button mdl-js-button mdl-js-ripple-effect">Cancel</button>
   <button type="submit" (click)="cancelled.emit(selectedItem)"
    class="mdl-button mdl-js-button mdl-button--colored mdl-js-ripple-effect">
  </div>
  ` 

})

See also

• AngularJS
• AngularJS data binding
• JavaScript library
• Web application

External links