Author: Dawid Adach
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
- Import
FormsModule
into theapp.module.ts
: - Add
FormsModule
to the imports[] array: - Add a new variable to
app.component.ts
and call it a name - Update the Modal Body within the
app.component.html
template - Save and run the project.
- Add a new function (app.component.ts) and the button (app.component.html) to trigger the function as shown below
- Save the file and run the project
- Remove the name variable and the changeName() function in
app.component.ts
- Empty the Modal Body div in
app.component.html
- Import following
ReactiveFormsModule
and add it to the imports[] - Import FormControl in
app.component.ts
- Define a new variable in
app.component.ts
- Update the Modal Body in
app.component.html
with the following code - Save and run the project.
The easiest way to work with forms is to use the ngModel
directive. Let's see how it works.
import { FormsModule } from '@angular/forms';
...
imports: [
...
FormsModule
],

export class AppComponent {
@ViewChild(ModalDirective) modal: ModalDirective;
name: string = '';
...
<!--Body-->
<div class="modal-body">
<input [(ngModel)]="name" #ctrl="ngModel">
{{name}}
</div>
<!--/.Body-->

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.
<!--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";
}
...

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:
2. formControl
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
....
imports: [
BrowserModule,
BrowserAnimationsModule,
MDBBootstrapModule.forRoot(),
FormsModule,
ReactiveFormsModule
],
import {FormControl} from '@angular/forms';
export class AppComponent {
@ViewChild(ModalDirective) modal: ModalDirective;
timeInput = new FormControl();
subjectInput = new FormControl();
locationInput = new FormControl();
descriptionInput = new FormControl();
...
<!--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-->

Previous lesson Next lesson
Spread the word:
