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 versionnvm use node --lts
Start the appnpm start
Create a test application called angular-formsng new angular-forms
Generate the data object that is submitted by the formng 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 componentng 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.