Search⌘ K
AI Features
Home
Courses
Mastering Mobile Application Development with Ionic

Template Driven Forms

Explore how to create template-driven forms in Ionic with Angular by placing form logic in the template and handling data submission in the component class. Understand one-way data binding with ngModel and learn to manage form input efficiently for building interactive cross-platform mobile applications.

We'll cover the following...

The final way we can build forms for our apps involves removing the logic from the class and implementing it directly within the form itself.

Let’s look at how this works by creating a template-driven form.

Creating a new project

Using the Ionic CLI, we create the project as follows:

ionic start template-form blank --type=angular

The home component

We’ll start by editing the class, as this is the most straightforward part of our application to work with, unlike the previous examples of form validation that we’ve covered.

In the template-form/src/app/home/home.page.ts file, we make the following amendment (highlighted):

TypeScript 3.3.4
import { Component } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor() {}
  public saveDetails(value: any): void {
    console.dir(value);
  }
}

We add a single method of ...