• Tutorials Logic, IN
  • +91 8092939553
  • info@tutorialslogic.com
<<< Simply Easy Logic >>>
  1. Home
  2. Angular

Angular Forms

Forms

Angular forms are used to enable users to login in the application, to update a profile, to enter sensitive information, and to perform various data-entry tasks. There are besically two types of forms available in angular-

Reactive Forms

Using reactive forms, instead of defining the form in our template (i.e. in component.html), the structure of the form is defined in component (i.e. component.ts).

Template-driven Forms

Using template-driven forms, we first create html input elements in template and then we use directives like ngModel to bind their value to a component’s variable.

Both reactive as well as template-driven are used to collect user input from the view, and then validate the user input, and provide a way to track the changes. For small projects, we can choose any one from the reactive and template-driven approach, but for bigger projects, it is recommended to choose reactive forms as they scale better.

Reactive Forms Implementation Steps

Step 1

First create a component for reactive forms by running below command in the terminal.

										    
											ng generate component reactive-forms

Step 2

Now, import NgModule, ReactiveFormsModule and include it in the import array of module, in your app.module.ts file.

										    
											import { BrowserModule } from '@angular/platform-browser';
											import { NgModule } from '@angular/core';
											import { ReactiveFormsModule } from '@angular/forms';
											import { AppComponent } from './app.component';
											import { ReactiveFormsComponent } from './reactive-forms/reactive-forms.component';
											
											@NgModule({
												declarations: [
												    AppComponent,
													ReactiveFormsComponent
												],
												imports: [
												    BrowserModule,
													ReactiveFormsModule
												],
												providers: [],
												bootstrap: [
												    AppComponent
												]
											})
											
											export class AppModule { }

Step 3

										    
											import { Component } from '@angular/core';
											
											@Component({
												selector: 'app-root',
												templateUrl: './app.component.html',
												styleUrls: ['./app.component.css']
											})
											
											export class AppComponent {
												title = 'my-first-project';
											}
											
										
										    
											
											<div style="text-align:center">
											    <h1>Welcome to {{ title }}!</h1>
											</div>
											
										
										    
											h1 {
												color: green;
											}
											
										
										    
											import { TestBed, async } from '@angular/core/testing';
											import { AppComponent } from './app.component';
											
											describe('AppComponent', () => {
												beforeEach(async(() => {
													TestBed.configureTestingModule({
														declarations: [
														    AppComponent
														],
													}).compileComponents();
												}));
												
												it('should create the app', () => {
													const fixture = TestBed.createComponent(AppComponent);
													const app = fixture.debugElement.componentInstance;
													expect(app).toBeTruthy();
												});
												
												it(`should have as title 'my-first-project'`, () => {
													const fixture = TestBed.createComponent(AppComponent);
													const app = fixture.debugElement.componentInstance;
													expect(app.title).toEqual('my-first-project');
												});
												
												it('should render title in a h1 tag', () => {
													const fixture = TestBed.createComponent(AppComponent);
													fixture.detectChanges();
													const compiled = fixture.debugElement.nativeElement;
													expect(compiled.querySelector('h1').textContent).toContain('Welcome to my-first-project!');
												});
											});

Template-driven Forms Implementation Steps

Step 1

First create a component for template driven forms by running below command in the terminal.

										    
											ng generate component template-forms

Step 2

Now, import NgModule, FormsModule and include it in the import array of module, in your app.module.ts file.

										    
											import { BrowserModule } from '@angular/platform-browser';
											import { NgModule } from '@angular/core';
											import { ReactiveFormsModule } from '@angular/forms';
											import { AppComponent } from './app.component';
											import { TemplateFormsComponent } from './reactive-forms/reactive-forms.component';
											
											@NgModule({
												declarations: [
												    AppComponent,
													TemplateFormsComponent
												],
												imports: [
												    BrowserModule,
													ReactiveFormsModule
												],
												providers: [],
												bootstrap: [
												    AppComponent
												]
											})
											
											export class AppModule { }

High Quality Tutorials

Waste no more time

Tutorials