Default form inputs have a simple border and basic styling.
Place an optional label and an input inside of a
<ma-input-group>
to create a basic form building block.
The label's for
attribute is automatically wired so that
clicking the label focuses the input.
<ma-input-group> <label>Text Input</label> <input type='text' placeholder='Placeholder text'> </ma-input-group>
Add the attribute [inline]='true'
to display the input
inline with its label. Use CSS width to line up the labels.
<ma-input-group [inline]='true'> <label style='width: 7em'> Name </label> <input type='text' placeholder='Placeholder text'> </ma-input-group> <ma-input-group [inline]='true'> <label style='width: 7em'> Password </label> <input type='password' placeholder='Placeholder text'> </ma-input-group>
Use the boolean attributes disabled
or readonly
to make immutable form controls.
<ma-input-group> <label>Disabled Input</label> <input type='text' placeholder='Placeholder text' disabled> </ma-input-group> <ma-input-group> <label>Read-only Input</label> <input type='text' value='Value text' readonly> </ma-input-group>
A <textarea>
may also be placed into an input group.
<ma-input-group> <label>Textarea</label> <textarea>Content text</textarea> </ma-input-group>
Use the attribute [in-text]='true'
to make an input group
…to make an input group <ma-input-group [in-text]='true'> <input type='text' value='flow inline' style='width: 6em'> </ma-input-group> with text.
Underlined inputs have a minimalist style.
Add the underlined
class to any
<input>
or <textarea>
inside an <ma-form-group>
.
An "underlined" <textarea>
actually has two lines
to indicate that it is a multi-line input.
<ma-input-group> <label>Textarea</label> <textarea class='underlined'> Content text </textarea> </ma-input-group>
Attach text or symbols to an input.
Use a span.ma-add-ons
to attach symbols or letters
to the beginning or end of an input.
<ma-input-group> <span class='ma-add-ons'> <span>$</span> <input type='text' placeholder='Enter price'> <span>.00</span> </span> </ma-input-group>
Inputs adjust to font size automatically.
<ma-input-group style='font-size: 20pt;'> <label> <span class='ma-add-ons'> <input type='text' placeholder='Enter date'> <span> <fa name='calendar'></fa> </span> </span> </label> </ma-input-group>
A select offers multiple options.
<ma-input-group> <label>Color</label> <select> <option>Red</option> <option>…</option> </select> </ma-input-group>
Select one item from a collection.
<ma-radio-group> <label> Favorite Player </label> <label> <input type='radio' checked> Alex Ovechkin </label> … <label> <input type='radio' disabled> Sidney Crosby </label> </ma-radio-group>
Set the property [inline]
to true
to display
radion buttons inline.
<ma-radio-group [inline]='true'> <label> It's easy as… </label> <label> <input type='radio'> 1 </label> … </ma-radio-group>
Set boolean properties.
<ma-checkbox-group> <label> Great Players </label> <label> <input type='checkbox' checked> Alex Ovechkin </label> … <label> <input type='checkbox' disabled> Sidney Crosby </label> </ma-checkbox-group>
Set the property [inline]
to true
to display
radion buttons inline.
<ma-checkbox-group [inline]='true'> <label> As simple as… </label> <label> <input type='checkbox'> Do </label> … </ma-checkbox-group>
Plays nicely with Angular's form validation.
Use the [control]
property to hook into Angular's form
validation. The following example demonstrates imperative form
validation, but template-driven validation is also possible.
The markup for this example form is:
<form (ngSubmit)='handleSubmit()' [ngFormModel]='demoForm'> <ma-input-group [control]='demoForm.controls["name"]'> <label> Name <input type='text' placeholder='Enter your name (required)' ngControl='name'> </label> </ma-input-group> <ma-input-group [control]='demoForm.controls["age"]'> <label> Age <input type='text' placeholder='Enter your age' ngControl='age'> </label> </ma-input-group> <ma-button [submit]='true' [disabled]='!demoForm.valid'> <fa name='user-plus'></fa> Save </ma-button> </form>
To implement validation, the <form>
element must have
its [control]
directive set to a ControlGroup
.
Each input needs a control name that corresponds to a control in the
control group (see below), e.g. ngControl='name'
. Finally,
the <ma-input-group>
needs its control directive set to
the same control as its input. This approach is a bit verbose but it is the
only way to work with Angular forms.
The component for this form looks like this:
import 'dart:html'; import 'package:angular/angular.dart'; import 'package:angular_forms/angular_forms.dart'; import 'package:ng_fontawesome/ng_fontawesome.dart'; import 'package:ng_modular_admin/ng_modular_admin.dart'; import 'package:ng_modular_admin/validators.dart' as MaValidators; /// Forms component. @Component( selector: 'forms', templateUrl: 'forms.html', styles: const [''' form { max-width: 30em; } '''], directives: const [CORE_DIRECTIVES, FaIcon, formDirectives, MA_DIRECTIVES] ) class FormsComponent { ControlGroup demoForm; FormsComponent() { final builder = new FormBuilder(); this.demoForm = builder.group({ 'name': ['', MaValidators.required()], 'age': ['', MaValidators.integer(min: 0)], }); } void handleSubmit() { var name = this.demoForm.controls['name'].value; var age = this.demoForm.controls['age'].value; window.alert('You submitted name="$name", age="$age".'); } }
The component creates a CongrolGroup
using the FormBuilder
factory. This control group is the one passed into the form, and the map
keys passed to the builder correspond to the control names assigned to each
input.