Turning a simple form into a template-driven form

We have defined the following form, which consists of a form tag, two input fields, and a button, like so:

<form>
  <input id="name" name="name" placeholder="first name" required>
  <input id="surname" name="surname" placeholder="surname" required>
  <button>Save</button>
</form>

Here, we clearly have two input fields that are required, hence the required attribute for the input elements. We also have a Save button. The requirement we have on such a form is that it should not submit its data until all required fields are filled in. To accomplish this, we need to do two things:

Save the input field values to an object with [(ngModel)]
Only submit the form if it has no errors, by using the ngForm directive

We now change the form to look like this:

<form #formPerson="ngForm">
  <input [(ngModel)]="person.firstName" id="name" name="name"
   placeholder="first name" required>
  <input [(ngModel)]="person.surname" id="surname" name="surname"
   placeholder="surname" required>
  <button (click)="submit()" *ngIf="formPerson.form.valid">Save</button>
</form>

Let's talk about the changes we made. First off, we have the following piece of code:

<form (ngSubmit)="save()" #formPerson="ngForm">

We created a view reference called formPerson that has the value ngForm assigned to it. This means we have a reference to the form. The form view reference now contains a lot of interesting properties that will help us determine whether the form is ready to be submitted.

As for the second change we made, we connected the input data to ngModel:

<input [(ngModel)]="person.name" id="name" name="name"
 placeholder="first name" required>

The ngModel allows us to create a double binding to a property. It is known as a banana in a box, which is really a memory rule for you to be able to remember how to type it. We create it in two steps. First we have ngModel, then we add the banana, the parenthesis, like this: (ngModel). After that we put the banana in a box. Square brackets will serve as our box, which means we finally have [(ngModel)]. Remember, it's called banana in a box, not box in a banana.

Here, we ensured that the value of the input was saved down to person.name, by utilizing the ngModel directive.

Lastly, we decorated our button element using the *ngIf directive, like this:

<button *ngIf="formHero.form.valid">Save</button>

We used an *ngIf directive to be able to hide the button, should the form prove to be invalid. As you can see, we are utilizing our form view reference and its valid property. If the form is valid, then show the button; otherwise, hide it.

This is the very basics of setting up a template-driven form. Let's investigate this a little deeper by looking at:

What CSS is being rendered, so we can render that appropriately depending on the form state
How to detect a specific error on an input element

Table of Contents for Turning a simple form into a template-driven form

Create new playlist

Sign In

Sign Up

Table of Contents for
Turning a simple form into a template-driven form