ngx-mat-form-components v0.6.1

Material Form Components

###Features

• Stylized material design form components.
• Components with dynamic input and output properties.
• Components:
  • Input
  • Select
  • Datepicker
  • Textfield
  • Dropzone
  • Button

A simpler way to build your material design form and make your source code cleaner.

###Install

   $ npm install --save ngx-mat-form-components

###Usage

Import the module

// in app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MatFormComponentsModule } from 'ngx-mat-form-components';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatFormComponentsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

###Input

// in app.component.html

<mfc-input></mfc-input>

####Input Options | Property @Input() | Type | Description | Default | :------------ |:--------:| -----:| ----:| | formGroup | FormGroup | The FormGroup which the input belongs | null | | formcontrolname | String | The input FormGroupName | null | | type | String | Type of input element to display. | text | | label | String | Input label | null | | placeholder | String | Input placeholder | null | | mask | String | Stylized mask| null | | translate | String | Translation of messages | "pt" |

####Input Example

  <mfc-input 
		  [formGroup]="formGroupName"
		  label="Name"
		  placeholder="type your name here" 
		  type="text" 
		  formcontrolname="name" 
		  fxFlex="20" >
  </mfc-input>

• Translate options: - PORTUGUESE ('pt') - ENGLISH ('en') - SPANISH ('es')

• Mask options: - CPF ('cpf') - CNPJ ('cnpj') - CPF OR CNPJ ('cpf_cnpj') - PHONE BRAZIL ('phone_br') - CEP ('cep') - DATE ('date')

  <mfc-input 
		  [formGroup]="formGroupName"
		  label="Name"
		  placeholder="type your name here" 
		  type="text" 
		  formcontrolname="name" 
		  mask="phone"
		  fxFlex="20" >
  </mfc-input>

###Select

// in app.component.html
<mfc-select></mfc-select>

####Select Options

• Translate options: - PORTUGUESE ('pt') - ENGLISH ('en') - SPANISH ('es')

####Select Example

<mfc-select 
		[formGroup]="formGroupName" 
		searchField="name" 
		label="Clinics" 
		formcontrolname="clinic" 
		valueField="id" 
		displayField="name" 
		[data]="dataClinic" 
		fxFlex="30">
</mfc-select>

<mfc-select 
		[formGroup]="formGroupName" 
		label="Clinics" 
		formcontrolname="clinic" 
		valueField="id" 
		displayField="name" 
		[data]="dataClinic" 
		fxFlex="30">
</mfc-select>

###DatePicker

// in app.component.html
<mfc-datepicker></mfc-datepicker>

####DatePicker Options

• Translate options: - PORTUGUESE ('pt') - ENGLISH ('en') - SPANISH ('es')

####DatePicker Example

<mfc-datepicker 
		[formGroup]="formGroupName" 
		label="Payment date" 
		formcontrolname="date" 
		fxFlex="30">
</mfc-datepicker>

###TextField

// in app.component.html
<mfc-textfield></mfc-textfield>

####TextField Options

• Translate options: - PORTUGUESE ('pt') - ENGLISH ('en') - SPANISH ('es')

####TextField Example

<mfc-textfield 
			[formGroup]="formGroup" 
			formcontrolname="date" 
			label="Text" 
			fxFlex="30">
</mfc-textfield>

<mfc-textfield 
			[formGroup]="formGroup" 
			formcontrolname="date" 
			label="Text" 
			minRows="2"
			maxRows="5"
			fxFlex="30">
</mfc-textfield>

###Button

// in app.component.html
<mfc-button></mfc-button>

####Button Options

####Button Example

<mfc-button 
			(click)="edit()" 
			icon="edit" 
			background="#039be5" 
			color="white" 
			width="100px" 
			height="40px" 
			label="Edit">
</mfc-button>

###Dropzone

// in app.component.html
<mfc-dropzone></mfc-dropzone>

#####To get files

####Dropzone Example

<mfc-dropzone
			acceptedFiles=".png, .jpeg, .jpg"
			dropMessage="Click or drag the file here!"
			msgFileTooBig="Very large file!"
			msgInvalidFileType="Type not allowed"
			msgRemoveConfirmation="Confirm delete?"
</mfc-dropzone>