@mediaman/angular-form-components

Angular library of common, un-styled form components.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Sep 24, 2018Jan 25, 2018Minified + gzip package size for @mediaman/angular-form-components in KB

Readme

angular-form-components

Angular library of common, un-styled form components.

Build Status npm version

Installation

npm install --save @mediaman/angular-form-components

Importing library

You need to import the module in your application:

import { NgModule } from '@angular/core';
import { AngularFormComponentsModule } from '@mediaman/angular-form-components';

@NgModule({
    imports: [AngularFormComponentsModule]
});
export class AppModule {
}

Enabling XSRF support

You can enable xsrf support to protect your form API agains cross domain forgery by providing an API endpoint to set the XSRF token.

import { NgModule } from '@angular/core';
import { AngularFormComponentsModule } from '@mediaman/angular-form-components';

@NgModule({
    imports: [AngularFormComponentsModule.forRoot({xsrfApiUrl: 'http://example.com/api/v1/csrf'})]
});
export class AppModule {
}

Components

We've also added a demo of the unstyled components with their respective documentation.

Input field

The mm-input component can represent all HTML input fields where a value can be entered.

import { Component } from '@angular/core';

@Component({
    selector: 'contact-form',
    template: `<mm-input [name]="'name'"
                    [id]="'name'"
                    [required]="true"
                    [(ngModel)]="name"
                    [label]="'Your name'"></mm-input>`
})
export class ContactFormComponent {
    public name: string = '';
}

Properties

name description possible values default value
type The type of the rendered input element text, search, number, email, ... text
name The name of the rendered input element *
id The id of the rendered input element *
required The required state of the rendered input element true, false false
pattern Regular expression the value is checked against. Type must be text, search, tel, url, email, or password true, false
label The label for the input element *

Select

The mm-select component represents a HTML select field.

import { Component } from '@angular/core';
import { SelectOptionInterface } from '@mediaman/angular-form-components';

@Component({
    selector: 'contact-form',
    template: `<mm-select [name]="'gender'"
                    [id]="'gender'"
                    [options]="genderOptions"
                    [required]="true"
                    [(ngModel)]="gender"
                    [label]="'Your gender'"></mm-select>`
})
export class ContactFormComponent {
    public gender: string = '';
    public genderOptions: SelectOptionInterface[] = [
        {
            value: 'female',
            label: 'Female'
        },
        {
            value: 'male',
            label: 'Male'
        },
        {
            value: 'x',
            label: 'I don\'t care'
        },
    ];
}

Properties

name description possible values default value
name The name of the rendered select element *
id The id of the rendered select element *
options The select elements options SelectOptionInterface[] []
required The required state of the rendered select element true, false false
label The label for the select element *

Radio button

The mm-radio-button component represents a HTML radio button.

The mm-radio-button component should be used, if possible, in combination with the mm-radio-button-group component.

import { Component } from '@angular/core';

@Component({
    selector: 'contact-form',
    template: `
        <mm-radio-button-group [name]="'contactPossibility'"
            [required]="true"
            [(ngModel)]="contactPossibility">
            <mm-radio-button [id]="'contactPossibilityPhone'"
                [value]="'phone'"
                [label]="'Phone'"></mm-radio-button>
            <mm-radio-button [id]="'contactPossibilityEmail'"
                [value]="'email'"
                [label]="'E-Mail'"></mm-radio-button>
        </mm-radio-button-group>
    `
})
export class ContactFormComponent {
    public contactPossibility: string = '';
}

Checkbox

The mm-checkbox component represents a HTML checkbox.

import { Component } from '@angular/core';

@Component({
    selector: 'contact-form',
    template: `
        <mm-checkbox [id]="'newsletterDoc'"
            [label]="'I want to get the newsletter'"
            [checked]="newsletterDoc"
            (change)="newsletterDoc = !newsletterDoc"></mm-checkbox>
        <mm-checkbox [id]="'emailDoc'"
            [label]="'It is okay for me to get contacted via email'"
            [checked]="emailDoc"
            (change)="emailDoc = !emailDoc"></mm-checkbox>
    `
})
export class ContactFormComponent {
    public newsletterDoc: boolean;
    public emailDoc: boolean;
}

Properties

name description possible values default value
name The name of the rendered radio button element *
id The id of the rendered radio button element *
value The value of the rendered datio button element *
required The required state of the rendered radio button element true, false false
label The label for the radio button element *

Toggle

The mm-toggle component represents a simple toggle element with a hidden checkbox used to store the state.

import { Component } from '@angular/core';

@Component({
    selector: 'contact-form',
    template: `
        <mm-toggle [name]="'privacy'"
                  [id]="'privacy'"
                  [label]="'I accept the terms of usage.'"
                  [required]="true"
                  [(ngModel)]="privacyAccepted"></mm-toggle>
    `
})
export class ContactFormComponent {
    public privacyAccepted: boolean = false;
}

Properties

name description possible values default value
name The name of the rendered toggle element *
id The id of the rendered toggle element *
required The required state of the rendered toggle element true, false false
label The label for the toggle element *

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.