Create an employee component using the command prompt
ng g c employee/create-employee --spec=false --flat=true
--spec=false : Do not create spec files while creating the component( These files are required for unit testing)
The spec files are unit tests for your source files. The convention for Angular applications is to have a .spec.ts file for each .ts file. They are run using the Jasmine javascript test framework through the Karma task runner when you use the ng test command
--flat=true : Create all files in employee folder
Now add some html to the create-employee-component.html file as below
<form class="form-horizontal">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Create Employee</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-sm-2 control-label" for="fullName">Full Name</label>
<div class="col-sm-8">
<input id="fullName" type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-8">
<input id="email" type="text" class="form-control">
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary" type="submit">Save</button>
</div>
</div>
</form>
Save the file and add the reference in app-component.html file as below. And run the application to get the output.
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
{{ title }}
</h1>
<app-create-employee></app-create-employee>
</div>
<router-outlet></router-outlet>
Below piece of code, you will get while creating the employee component.
<app-create-employee></app-create-employee>
See the create-employee.component.ts code
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-create-employee',
templateUrl: './create-employee.component.html',
styleUrls: ['./create-employee.component.css']
})
export class CreateEmployeeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
selector: 'app-create-employee' which means when you want to use the employee component you have to use this selector. This is by default created when we create a component. If you want to change the name you a change but the same piece of selector you have to refer in all the place where you want to use the employee component.
As of now we have not created a angular form. To make it reactive angular form we have to import
import { ReactiveFormsModule } from '@angular/forms';
and we have to add it in imports array in app.module.ts file
imports: [
BrowserModule,
AppRoutingModule,
ReactiveFormsModule
],
Then we need to make minor modifications in create-employee.component.html file as below.
<form class="form-horizontal" [formGroup]="employeeForm">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Create Employee</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="col-sm-2 control-label" for="fullName">Full Name</label>
<div class="col-sm-8">
<input id="fullName" type="text" class="form-control" formControlName="fullName">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="email">Email</label>
<div class="col-sm-8">
<input id="email" type="text" class="form-control" formControlName="email">
</div>
</div>
</div>
<div class="panel-footer">
<button class="btn btn-primary" type="submit">Save</button>
</div>
</div>
</form>
Now save and you will get the same output. If we will forget to ReactiveFormsModule then we will get the error as below.
Once ReactiveFormsModule is added the page will appear without any error but if you will open the developer tool you will get some error as below
We are getting these errors as we are created a
reactive form but the controls used in the reactive form are not initialized.
As it is not getting the controls it is giving these errors. To fix this we need
to make changes in the create-employee.component.ts
file as below. See the highlighted code.
import
{ Component, OnInit } from '@angular/core';
import
{ FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-create-employee',
templateUrl: './create-employee.component.html',
styleUrls: ['./create-employee.component.css']
})
export
class CreateEmployeeComponent implements
OnInit {
employeeForm: FormGroup;
constructor()
{ }
ngOnInit() {
this.employeeForm
= new FormGroup({
fullName: new
FormControl(),
email: new
FormControl()
});
}
}
Now save and run the application. You will not get any type of errors. See the below output.
Now your simple reactive form is ready. You may add as many as controls in this form by following the same process.
