AppDividend
Latest Code Tutorials

Angular 7 Forms Tutorial Example

1,300

Get real time updates directly on you device, subscribe now.

Angular 7 Forms Tutorial Example is today’s leading topic. For this example, we will use Reactive forms. Reactive forms provide the model-driven approach to handle the form inputs whose values are changing over time. Reactive forms use the specific and immutable approach to managing the state of the form at the given point of time. Each change to the form state returns the new state, which maintains the integrity of a model between the changes. Reactive forms also provide the straightforward path to testing because you are assured that your data is consistent and predictable when the request has been made.

Earn a Tech Degree and get the skills like Frontend Development or Javascript Development that can help you to launch a career. Start your free trial

Angular 7 Forms Tutorial Example

Let us install Angular 7 using Angular CLI using the following command.

#1: Install Angular 7 using Angular CLI

If you have not upgraded the Angular CLI, then you can check out this How To Update Angular CLI To Version 7Type the following command to install Angular 7.

ng new ng7forms
cd ng7forms
ng serve

 

Angular 7 Forms Tutorial Example

Now, go inside the ng7forms folder and create open the folder inside VSCode.

cd ng7forms
code .

#2: Install Bootstrap 4 in Angular 7

We can install the Bootstrap 4 using the following command.

npm install bootstrap --save

Now, include the bootstrap 4 inside the angular.json file inside styles array.

"styles": [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.css"
],

Save the file and start the dev server using the following command.

ng serve -o

You can see one browser window will open at this URL http://localhost:4200/

#3: Registering the Reactive Forms Module

We can use the reactive forms by importing ReactiveFormsModule from the @angular/forms package and add it to your app.module.ts file’s imports array. So add the module inside the app.module.ts file.

// app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})

#4: Add FormControl class

The FormControl class is the fundamental building block when using the reactive forms. If we want to register the single form control, we need to import the FormControl class into our component and create the new instance of a form 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('');
}

Use the constructor  FormControl to set its initial value, which in this case is the email, and it is an empty string. By creating this control in your component class, you will get immediate access to listen, update, and validate the state of the form input and in our case it is email.

#5: Registering the control into the template

After you create a control in the component class, you must associate it with the form control element in a template. Update that template with a form control using the formControl binding provided by a FormControlDirective included in the ReactiveFormsModule.

<div class="container">
  <label>
    Email:
    <input type="text" [formControl]="email">
  </label>
</div>

Using a template binding syntax, the form control is now registered to an email input element in a template. A form control and the DOM element communicate with each other like the view reflects the changes in the model, and the model demonstrates the changes in the view. So this kind of feature called as a two way-data binding.

#6: Controlling the form value

You can display the value in these ways:

  1. Through the valueChanges observable where you can listen for changes in the form’s value in the template using AsyncPipe or in the component class using the subscribe() method.
  2. With the value property, it gives you a snapshot of the current value.
Related Posts
1 of 16

So basically, we can achieve the two-way data binding kind of functionality.

<div class="container">
  <label>
    Email:
    <input type="text" [formControl]="email">
  </label>
  <p>
    Value: {{ email.value }}
  </p>
</div>

 

Angular 7 Forms Example

#7: Updating the form control value

Reactive Forms have the methods to change the control’s value programmatically, which gives us the ability to update the value without any user interaction. The form control instance provides the setValue() method that updates a value of the form control and validates the structure of a value provided against the control’s structure.

Write the following code inside 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('ankit@appdividend.com');
  }
}

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

<div class="container">
  <div class="form-group">
    <label>
      Email:
    </label>
    <input type="text" [formControl]="email" />
  </div>
  <div class="form-group">
    <button (click)="updateEmail()" class="btn btn-dark">Update Email</button>
  </div>
  <p>
    Value: {{ email.value }}
  </p>
</div>

Now, type the email value inside the textbox so that it will display the current typed value. Now, click the update email button and it will change the textbox value as well as the display value.

1 Comment
  1. racing tips says

    Perfect wor you have done, this site is reaply clol with good information.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.