2.0.11 • Published 6 years ago

@mediaman/angular-form-components v2.0.11

Weekly downloads
7
License
MIT
Repository
github
Last release
6 years ago

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

namedescriptionpossible valuesdefault value
typeThe type of the rendered input elementtext, search, number, email, ...text
nameThe name of the rendered input element*
idThe id of the rendered input element*
requiredThe required state of the rendered input elementtrue, falsefalse
patternRegular expression the value is checked against. Type must be text, search, tel, url, email, or passwordtrue, false
labelThe 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

namedescriptionpossible valuesdefault value
nameThe name of the rendered select element*
idThe id of the rendered select element*
optionsThe select elements optionsSelectOptionInterface[][]
requiredThe required state of the rendered select elementtrue, falsefalse
labelThe 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

namedescriptionpossible valuesdefault value
nameThe name of the rendered radio button element*
idThe id of the rendered radio button element*
valueThe value of the rendered datio button element*
requiredThe required state of the rendered radio button elementtrue, falsefalse
labelThe 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

namedescriptionpossible valuesdefault value
nameThe name of the rendered toggle element*
idThe id of the rendered toggle element*
requiredThe required state of the rendered toggle elementtrue, falsefalse
labelThe label for the toggle element*
2.0.11

6 years ago

2.0.10

6 years ago

2.0.9

6 years ago

2.0.8

6 years ago

2.0.7

6 years ago

2.0.6

6 years ago

2.0.5

6 years ago

2.0.4

6 years ago

2.0.3

6 years ago

2.0.2

6 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.0.0

6 years ago

0.0.8

6 years ago

0.0.7

6 years ago

0.0.6

6 years ago

0.0.5

6 years ago

0.0.4

6 years ago

0.0.3

6 years ago

0.0.1

6 years ago