Forms and inputs

In this lesson, we will learn how to deal with Inputs. Inputs are very widely used components in web development. We use them everywhere, starting with login form, newsletter subscription forms, new post editors through configuration panels, etc.

As you have seen while playing with the final app, we can use inputs to create a form to add a new event to our daily agenda.

In this lesson we will learn how to deal with forms.

1. ngModel

The easiest way to work with forms is to use the ngModel directive. Let's see how it works.

1. Import FormsModule into the app.module.ts:
• app.module.ts

import { FormsModule } from '@angular/forms';
...
  

2. Add FormsModule to the imports[] array:
• app.component.html

  imports: [
	...
    FormsModule
  ],

  


3. Add a new variable to app.component.ts and call it a name
• app.component.ts

export class AppComponent {
  @ViewChild(ModalDirective) modal: ModalDirective;
  name: string = '';
  ...
  

4. Update the Modal Body within the app.component.html template
• app.component.html

      <!--Body-->
      <div class="modal-body">
        <input [(ngModel)]="name" #ctrl="ngModel">
        {{name}}
      </div>
      <!--/.Body-->
  

5. Save and run the project.



As you can see, we have bound our view (Input) with the model (variable) thanks to ngModel. Further, this works in both ways, that's why it's called a two-way Data Binding.

6. Add a new function (app.component.ts) and the button (app.component.html) to trigger the function as shown below
• app.component.html
• app.component.ts

      <!--Body-->
      <div class="modal-body">
        <input [(ngModel)]="name" #ctrl="ngModel">
        {{name}}
        <button (click)="changeName()">Call me Johny</button>
      </div>
      <!--/.Body-->

  

export class AppComponent {
  @ViewChild(ModalDirective) modal: ModalDirective;
  name: string = '';
  
  changeName(){
    this.name = "Johny";
  }
  ...

  

7. Save the file and run the project



Two-way binding means that any data-related changes affecting the model are immediately propagated to the matching view(s); and that any changes made in the view(s) (say, by the user) are immediately reflected in the underlying model. When the app data changes, so does the UI, and vice-versa.

So ngModel is the mechanism in Angular that implements two-way data binding. It’s not the only thing that does that, but it’s in most cases the directive we want to use for simple scenarios. We will dedicate a separate lesson to dive into further options.

For now I want you to remember that Angular comes with three different ways of building forms in our applications. There’s the template-driven approach which allows us to build forms with very little to none application code required, then there’s the model-driven or reactive approach using low-level APIs, which makes our forms testable without a DOM being required.

The ngModel is a template-driven case. Now I am gonna show you how to use a model-driven approach.

Before we move on you can revert the changes:

• Remove the name variable and the changeName() function in app.component.ts
• Empty the Modal Body div in app.component.html

2. formControl

8. Import following ReactiveFormsModule and add it to the imports[]
• app.module.ts

import {FormsModule, ReactiveFormsModule} from '@angular/forms';
....

  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
    ReactiveFormsModule
  ],

  

9. Import FormControl in app.component.ts
• app.component.ts

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

10. Define a new variable in app.component.ts
• app.component.ts

export class AppComponent {
  @ViewChild(ModalDirective) modal: ModalDirective;

  timeInput = new FormControl();
  subjectInput = new FormControl();
  locationInput = new FormControl();
  descriptionInput = new FormControl();
  ...
    

11. Update the Modal Body in app.component.html with the following code
• app.component.html

<!--Body-->
<div class="modal-body">
  <div class="md-form mb-5">
    <mdb-icon far icon="clock"></mdb-icon>
    <input
      type="text"
      id="time"
      class="form-control"
      mdbInput
      [formControl]="timeInput"
    />
    <label for="time">Time</label>
  </div>

  <div class="md-form">
    <mdb-icon fas icon="edit"></mdb-icon>
    <input
      type="text"
      id="subject"
      class="form-control"
      mdbInput
      [formControl]="subjectInput"
    />
    <label for="subject">Subject</label>
  </div>

  <div class="md-form mb-5">
    <mdb-icon far icon="map"></mdb-icon>
    <input
      type="text"
      id="location"
      class="form-control"
      mdbInput
      [formControl]="locationInput"
    />
    <label for="location">Location (optional) </label>
  </div>

  <div class="md-form">
    <mdb-icon fas icon="sticky-note"></mdb-icon>

    <input
      type="text"
      id="description"
      class="form-control"
      mdbInput
      [formControl]="descriptionInput"
    />
    <label for="description">Description (optional) </label>
  </div>
</div>
<!--/.Body-->
  

12. Save and run the project.