Boxed Inputs

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 with text.

…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

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>

Add Ons

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.

$ .00
<ma-input-group>
  <span class='ma-add-ons'>
    <span>$</span>
    <input type='text'
      placeholder='Enter price'>
    <span>.00</span>
  </span>
</ma-input-group>

Sizes

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>

Selects

A select offers multiple options.

<ma-input-group>
  <label>Color</label>
  <select>
    <option>Red</option>
    <option>…</option>
  </select>
</ma-input-group>

Radio Buttons

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>

Checkboxes

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>

Angular Validation

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.

Save

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.