Angular Template-Driven Forms

There are two types of forms in angular
1. reactive (or model-driven) forms
2. template-driven forms

This article is a short reminder on how to find information and on how to work with template-driven forms.

Documentation
The official angular documentation is https://angular.io/guide/forms

Prepare node
Install the latest node Long Term Support (LTS) with nvm.
nvm install --lts

Use the latest version
nvm use node --lts

Start the app
npm start

Create a test application called angular-forms
ng new angular-forms

Generate the data object that is submitted by the form
ng generate class Hero

Create a form component
An Angular form has two parts:
1. an HTML-based template
2. A component class to handle data and user interactions programmatically.

Generate the form component
ng generate component HeroForm

Update the form component’s html

<div class="container">
<h1>Hero Form</h1>
<form (ngSubmit)="onSubmit()" #heroForm="ngForm">

{{diagnostic}}

<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" [(ngModel)]="model.name" name="name" required #spy>
</div>
TODO: remove this: {{spy.className}}

<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control" id="alterEgo" [(ngModel)]="model.alterEgo" name="alterEgo">
</div>

<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power" [(ngModel)]="model.power" name="power" required>
<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
</select>
</div>

<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>

</form>
</div>

Update the app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';

@NgModule({
declarations: [
AppComponent,
HeroFormComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Update hero-form.component.ts

import { Component } from '@angular/core';

import { Hero } from '../hero';

@Component({
selector: 'app-hero-form',
templateUrl: './hero-form.component.html',
styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent {

powers = ['Really Smart', 'Super Flexible',
'Super Hot', 'Weather Changer'];

model = new Hero(18, 'Dr IQ 3000', this.powers[0], 'Chuck OverUnderStreet');

submitted = false;

onSubmit() {
console.log('Submit clicked');
console.log(JSON.stringify(this.model));

this.submitted = true;
}

// TODO: Remove this when we're done
get diagnostic() { return JSON.stringify(this.model); }
}

OnSubmit()
When the submit button is clicked, onSubmit() is called in the form component. To persist, you can create a service and send the object to the backend in json form. The backend then persists the object.

With SpringBoot, you would add a JerseyResource for the endpoint, a JPA repository for the model item and a facade and a service to save the model via the JPA repository.

Leave a Reply Cancel reply