ng-field

This package ng-field lets you handle errors in your forms.

Description

Easy to use, ng-field is very time saving and your html will be more clean and maintainable. It's working on all versions of Angular : Angular 2, Angular 3, Angular 4, Angular 5, Angular 6, Angular 7.

Installation

To install run this command:

npm install ng-field

How to use

Step 1. In your module.ts

Import ng-field and make sure you are importing FormsModule and ReactiveFormsModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { NgFieldModule } from 'ng-field';

@NgModule({
	declarations: [
		AppComponent
	],
	imports: [
		BrowserModule,
		NgFieldModule,
		FormsModule,
		ReactiveFormsModule
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule { }

Step 2. In your component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
})
export class AppComponent {

	editForm: FormGroup;

	constructor(private fb: FormBuilder) {
		this.createForm();
	}

	get getNameCtrl() { return this.editForm.get('nameCtrl'); }

	createForm(): void {
		this.editForm = this.fb.group({
			nameCtrl: [null]
		});
	}

	onSubmit(): void {
		console.log(this.getNameCtrl.value);
	}
}

Step 3. In your component.html

<form (ngSubmit)="onSubmit()" [formGroup]="editForm">
	<ng-field label="Name *" [control]="getNameCtrl" errorRequired="The name is required">
		<input type="text" class="form-control" formControlName="nameCtrl">
	</ng-field>
	<div>
		<button type="submit" class="btn">Sumbit</button>
	</div>
</form>

License

The MIT License. See the license --> MIT