Difference between revisions of "AngularJS form"
From Wiki @ Karl Jones dot com
Karl Jones (Talk | contribs) (→Form control) |
Karl Jones (Talk | contribs) (→Form group control) |
||
Line 17: | Line 17: | ||
A form group control allows the grouping together of two or more form controls. | A form group control allows the grouping together of two or more form controls. | ||
+ | |||
+ | Use <code>Validators.compose</code> to group elements. | ||
== FormBuilder == | == FormBuilder == |
Revision as of 12:20, 2 January 2017
The AngularJS framework provides support for HTML forms.
Contents
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.
Use Validators.compose
to group elements.
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] }) }) } }