angular-form-components

> Angular library of common, un-styled form components.


Installation

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

Importing library

You need to import the module in your application:

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

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

$3

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

`javascript
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.

$3

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

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

@Component({
selector: 'contact-form',
template: [id]="'name'"
[required]="true"
[(ngModel)]="name"
[label]="'Your name'">
})
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 | * ||

$3

The mm-select component represents a HTML select field.

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

@Component({
selector: 'contact-form',
template: [id]="'gender'"
[options]="genderOptions"
[required]="true"
[(ngModel)]="gender"
[label]="'Your gender'">
})
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 | * ||

$3

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.

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

@Component({
selector: 'contact-form',
template:
[required]="true"
[(ngModel)]="contactPossibility">
[value]="'phone'"
[label]="'Phone'">
[value]="'email'"
[label]="'E-Mail'">


})
export class ContactFormComponent {
public contactPossibility: string = '';
}
`

$3

The mm-checkbox component represents a HTML checkbox.

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

@Component({
selector: 'contact-form',
template:
[label]="'I want to get the newsletter'"
[checked]="newsletterDoc"
(change)="newsletterDoc = !newsletterDoc">
[label]="'It is okay for me to get contacted via email'"
[checked]="emailDoc"
(change)="emailDoc = !emailDoc">

})
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 | * ||

$3

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

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

@Component({
selector: 'contact-form',
template:
[id]="'privacy'"
[label]="'I accept the terms of usage.'"
[required]="true"
[(ngModel)]="privacyAccepted">

})
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 | * ||