Kalletolonen.com - Linux and coding articles

How to create template forms in Angular

This is a follow-along-a-tutorial article that has some insights about the framework and the methods used.

End result - a working rudimentary Angular form

Kalle Tolonen
Sept. 4, 2022

What are forms?

Forms are the go-to solution for gathering user input from web applications. You’ll need those in just about every web development project. I’m well versed in Django forms since my web site runs on Django, but I’m new to Angular. Django has inbuilt methods for form validation and cross-site forgery protection, so I suspect that those will be made manually with Angular.

Building the basic form

First, let’s create a new app and a component.

sudo ng new forms-demo

Next, we’ll create a teacher model @ app-folder.

#src/app/teacher.ts

export class Teacher {

    constructor(
        public id: number,
        public name: string,
        public subject: string
        public studentGPA?: string,
    ) { }

}

The question mark denotes that the field won’t be mandatory. After that’s done, let’s create a TeacherForm.

cd form-demo
ng generate component TeacherForm

#teacher-form.component.ts

import { Component } from '@angular/core';
import { Teacher } from '../teacher';

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

export class TeacherFormComponent {

  subjects = ['English', 'Math', 'Art']
  model = new Teacher(11, 'Eric Forester', this.subjects[2], '4.5')

  submitted = false;

  onSubmit() {
    this.submitted = true;
  }
}

Add the stuff to AppModule.

#app.module.ts

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

import { AppComponent } from './app.component';
import { TeacherFormComponent } from './teacher-form/teacher-form.component';

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

Let’s see if anything will render.

Making the form

The form is made with html and Angular directives.

teacher-form.component.html

Test: {{ model | json }}

<div class="form-group">
    <form #teaacherForm="ngForm">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name">
        <label for="studentGPA">Student GPA</label>
        <input type="text" class="form-control" id="studentGPA" [(ngModel)]="model.studentGPA" name="studentGPA">

        <label for="subject">Subject</label>
        <select class="form-control" id="subject" required [(ngModel)]="model.subject" name="subject">
            <option *ngFor="let subject of subjects" [value]="subject">
                {{subject}}
            </option>
        </select>
    </form>
</div>

The form #teacherForm pairs the ngModel with my model and the json filter allows us to see this in real time.

Making style selections

Visual design tips are useful for users to determine their needed actions and the aftermath of said follies.

#/app/assets/forms.css (a new file)

.ng-valid[required],
.ng-valid.required {
    border-left: 5px solid #42A948;
    /* green */
}

.ng-invalid:not(form) {
    border-left: 5px solid #a94442;
    /* red */
}

#app/index.html

<link rel="stylesheet" href="assets/forms.css">

To make arror messages helpful to the user, we need to implement them.

teacher-form.component.html

Test: {{ model | json }}

<div class="form-group">
    <form #teaacherForm="ngForm">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel">
        <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
            A name is required.
        </div>
        <label for="studentGPA">Student GPA</label>
        <input type="text" class="form-control" id="studentGPA" [(ngModel)]="model.studentGPA" name="studentGPA"
            #name="ngModel">
        <label for="subject">Subject</label>
        <select class="form-control" id="subject" required [(ngModel)]="model.subject" name="subject" #name="ngModel">
            <option *ngFor="let subject of subjects" [value]="subject">
                {{subject}}
            </option>
        </select>
    </form>
</div>

Notice how the name property is mentioned twice in every form element -> first as html and then as an Angular directive with the hashtag.

Add more teachers and make a functional submit-button

First, let’s make a mock up add-method in our .ts class.

#teacher-form.component.ts


  newTeacher() {
    this.model = new Teacher(42, '', '', '')
  }

Notice how this won’t work in real life, since the constructor implies to always use the same id-number - that can’t work since databases must have unique identifiers.

#teacher-form.component.html

<button type="button" class="btn btn-default" (click)="newTeacher(); teacherForm.reset()">
    New Teacher
</button>

A now to the submitting.

#teacher-form.component.html

Test: {{ model | json }}
<div [hidden]="submitted">
    <div class="form-group">
        <form #teacherForm="ngForm" (ngSubmit)="onSubmit()">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"
                #name="ngModel">
            <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
                A name is required.
            </div>
            <label for="studentGPA">Student GPA</label>
            <input type="text" class="form-control" id="studentGPA" [(ngModel)]="model.studentGPA" name="studentGPA"
                #name="ngModel">
            <label for="subject">Subject</label>
            <select class="form-control" id="subject" required [(ngModel)]="model.subject" name="subject"
                #name="ngModel">
                <option *ngFor="let subject of subjects" [value]="subject">
                    {{subject}}
                </option>
            </select>
            <br>
            <button type="button" class="btn btn-default" (click)="newTeacher(); teacherForm.reset()">
                New Teacher
            </button> -
            <button type="submit" class="btn btn-success" [disabled]="!teacherForm.form.valid">
                Submit changes
            </button>
        </form>
    </div>
</div>
<div [hidden]="!submitted">
    <h2>You submitted the following:</h2>
    <div class="row">
        <div class="col-xs-3">Name</div>
        <div class="col-xs-9">{{ model.name }}</div>
    </div>
    <div class="row">
        <div class="col-xs-3">Subject</div>
        <div class="col-xs-9">{{ model.subject }}</div>
    </div>
    <div class="row">
        <div class="col-xs-3">Student's GPA score</div>
        <div class="col-xs-9">{{ model.studentGPA }}</div>
    </div>
    <br>
    <button type="button" class="btn btn-primary" (click)="submitted=false">Edit</button>
</div>

Thoughts

This was a quick and dirty tutorial, it doesn’t go into any detail on CFRS (Cross Site Forgery Tokens), Data structures, SQL-injections or protections from them, inserting data into a real database and such. The tutorial did give a fair overview of the basic usage of forms with Angular.