AngularJS form

The AngularJS framework provides support for HTML forms.

Working with forms

If you simply want to get the value of a form input, use ngModel.

If you want to get the state of form input, use a form control.

Inputs can be grouped together using group controls.

Form control

A form control is an HTML form input element, such as input (HTML element). AngularJS provides input binding for programmatic handling of form controls, such as input validation.

Form group control

A form group control allows the grouping together of two or more form controls.

FormBuilder

FormBuilder is an Angular2 feature for working with forms.

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>
  `,
  directives: [ FORM_DIRECTIVES ],
  styles: [`...`]

})

export class FormComponent {
 constructor(private _builder: FormBuilder) {
  this.userForm = _builder.group ({
   nameGroup: _builder.group ({
    firstName: [this.user.firstName, Validators.required],
    lastName: [this.user.lastName, Validators.required]
   })
  })
 }
}

See also

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