Angular 8 Tutorial

Angular 8 Introduction History and versions of Angular 8 Architecture of Angular 8 How to install Angular 8 and set-up it. Creating our first Angular 8 app Angular 8 app loading

Difference between Angular And react

Angular vs react

Angular 8 Advantages Disadvantage

Advantage and Disadvantage of Angular 8

Angular 8 file structure

Angular 8 file structure

Angular 8 components

Components of Angular 8

Angular 8 CLI Commands

All CLI commands of Angular

Angular 8 with Bootstrap

How to install bootstrap for Angular 8 Libraries of Angular 8

Angular 8 Routing

Routing in Angular 8

Angular 8 directives

Angular 8 Directives Angular 8 ngIf directive Angular 8 ngFor directive Angular 8 ngSwitch directive Angular 8 ngClass directive Angular 8 ngStyle directive

Angular 8 pipes

Angular 8 Pipes

Angular 8 databinding

Angular 8 Data binding Angular 8 Event binding Angular 8 Property binding Two-way data binding in Angular 8

String Interpolation In Angular 8

Angular 8 String interpolation

Angular 8 forms

Angular 8 Forms Data flow of forms in Angular 8 Creating forms in Angular 8 Testing and validation of forms in Angular 8

Error fixing in Angular 8

Error fixing in Angular 8

Dependency injection and services in Angular 8

Dependency injection services in Angular 8

Angular 8 Animations

Angular 8 Animations

Dynamic components in Angular 8

Dynamic components in Angular 8

Angular 8 Module

Angular 8 Module Deploying an angular 8 app

Introduction of unit testing in angular 8

Unit testing in angular 8

Observables in angular 8

Observables in angular 8

Angular 8 universal

Angular 8 universal

Angular 8 Changes and new features

New features and changes in Angular 8

Conclusion

Angular 8 Conclusion

Creating form in Angular 8

The angular reactive form is used to handle the user's input. We can use Angular form in the application to authorize the user to log in, to update profile, to enter information, and to perform many other data-entry tasks.

In Angular 8, there are two approaches to handle the user's input by forms.

  • Reactive forms
  • Template-driven forms

Both are used to collect user input events from the view, validate the user input, create a form model and model to update, and provide a way to track changes.

Angular 8 Form Example

Here, we understand the angular 8 form example. We use Angular reactive form.

The steps are given below:

  • Create an Angular form app named angular8from and run the server by using the following commands.
ng new angular8form

Then,

cd angular8form
ng serve 
creating form in angular8
creating form in angular8 1
  • Install bootstrap 4 using the following command.
npm install bootstrap --save
  • Now, include the bootstrap four in the angular.json file into the style array in the angular project.
"styles":
 [
 "./node_modules/bootstrap/dist/CSS/bootstrap.min.css",
 "src/styles.css"
 ], 
creating form in angular8 2
  • Register the Reactive forms Module

Use the reactive forms by importing ReactiveFormsModule from @angular/forms package and add it into the app.module.ts file's import array.

We use the given below code in “app.module.ts” file.

 // app.module.ts 
 import { BrowserModule } from '@angular/platform-browser'; 
 import { NgModule } from '@angular/core'; 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component'; 
 import { ReactiveFormsModule } from '@angular/forms'; 
 @NgModule({ 
 declarations: [ 
 AppComponent 
 ], 
 imports: [ 
 BrowserModule, 
 AppRoutingModule, 
 ReactiveFormsModule 
 ], 
 providers: [], 
 bootstrap: [AppComponent], 
 }) 
 export class AppModule { }  
creating form in angular8 3
  • Add FormControl class register to the control in the template and update the FormControl value.

The FormControl class is the essential building block of angular when using reactive forms. So if we want to record the single form control, we need to import the FormControl class into our component and create the new instance of the form of control to save as the class property.

Now, modify the “app.component.ts” file.

 // app.component.ts 
 import { Component } from '@angular/core'; 
 import { FormControl } from '@angular/forms'; 
 @Component({ 
 selector: 'app-root', 
 templateUrl: './app.component.html', 
 styleUrls: ['./app.component.css'] }) 
 export class AppComponent { 
 email = new FormControl(''); 
 updateEmail() { 
 this.email.setValue('tutorial&[email protected]'); 
 } 
 }  
creating form in angular8 4

Also, update the view in app.component.html file.

Value:{{email.value}}

creating form in angular8 5

Now, we can start the server to see the output.

creating form in angular8 6

Enter any email, and we will see the result in the value.

creating form in angular8 7

When we click on the "Update Email" button, it will update the email id as we saved in the template file.

creating form in angular8 8



ADVERTISEMENT
ADVERTISEMENT