ngx-mat-form-components

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

Property @Input()	Type	Description	Default
[formGroup]	FormGroup	The FormGroup which the input belongs	null
[formcontrolname]	String	The input FormGroupName	null
[label]	String	The input Label	null
[searchField]	String	Display the search bar and sets the variable in which the search will be done	text
[valueField]	String	Sets which field will be the value of the select	null
[displayField]	String	Sets which field will be the displayed field	null
[data]	array	Array with the data to be displayed in the select	null
[translate]	String	Translation of messages	"pt"

• 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

Property @Input()	Type	Description	Default
[formGroup]	FormGroup	The FormGroup which the datepicker belongs	null
[formcontrolname]	String	The datepicker FormGroupName	null
[label]	String	The datepicker Label	null
[placeholder]	String	The datepicker placeholder	text
[translate]	String	Translation of messages	"pt"

• 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

Property @Input()	Type	Description	Default
[formGroup]	FormGroup	The FormGroup which the textfield belongs	null
[formcontrolname]	String	The textfield FormGroupName	null
[label]	String	The textfield Label	null
[placeholder]	String	The textfield placeholder	text
[minRows]	String	matAutosizeMinRows	"1"
[maxRows]	String	matAutosizeMaxRows	"3"
[translate]	String	Translation of messages	"pt"

• 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

Property @Input()	Type	Description	Default
[label]	String	The button Label	null
[color]	String	The button text color	null
[background]	String	The button background color	null
[icon]	String	The mat icon name	null
[width]	String	The button width	null
[height]	String	The button height	null
[fontSize]	String	The button text fontsize	null
[iconSize]	String	The icon size	null

| Property @Output() | Type | Description | | :------------ |:--------:| -----:| ----:| | (click) | event | The button click event |

####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>

Property @Input()	Type	Description	Default
[maxFilesize]	Number	Maximum file size	10
[acceptedFiles]	String	The types of files accepted	'.png, .jpeg, .jpg, .pdf, .doc, .docx, .xls, .cvs'
[resetOption]	Boolean	Reset button to dropzone	true
[resetLabel]	String	The string of reset buttom	'Limpar'
[resetColor]	String	The reset buttom text color	null
[resetBackground]	String	The reset buttom background color	null
[msgDrop]	String	The dropzone message	'Clique ou araste o arquivo aqui!'
[msgFileTooBig]	String	Message for files larger than allowed	'Arquivo muito grande! (Max: 10MB)'
[msgInvalidFileType]	String	Message for files not allowed	'Tipo de arquivo inválido!'
[msgRemoveConfirmation]	String	Removal confirmation message	'Confirma a remoção?'

#####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>