Angular 10 – Forms

In Angular, there are two types of forms: Template-driven forms and Reactive Forms. However, in this part, we would look at forms generally. We also see how to get user input from a form.

1. Creating a Form
2. Working with Model Class
3. Template-Driven Form Submission

1. Creating a Form

Let’s start by creating a simple form. Then we convert it to a Template-Driven form. The form would have three fields: firstname, lastname, email and address. Then there’ll be a submit button. When the user clicks on the submit button, the data would be submitted. And also displayed on the page.

Create a two-way bound form using the markup below. This code is placed in the FirstComponent

<form>
  Firstname: <input type="text" name="name" [(ngModel)]="firstname"><br>
  Lastname: <input type="text" name="latname" [(ngModel)]="lastname"><br>
  Email......: <input type="text" name="email" [(ngModel)]="email"><br>
  Address: <textarea name="address" [(ngModel)]="address"></textarea>
  <br>
  <button (click)="send()">Submit</button>
</form>
<hr>
<h4>Outputs</h4>
<p>{{firstname}}</p>
<p>{{lastname}}</p>
<p>{{email}}</p>
<p>{{address}}</p>

Then you’ll be prompted to import FormsModule and create the fields. Also you need to add the send() method. At this point, the FirstComponent class is as shown below:

export class FirstComponent implements OnInit {
  name: string;
  firstname: any;
  lastname: any;
  email: any;
  address: any;

  constructor() { }

  ngOnInit(): void {
  }

  send() {

  }
}

Relaunch and view the page. Then enter data in the text inputs. You will notice that the outputs are displayed immediately.

2. Working With Model Class

Note that in the example code, we have not actually worked with form submission. We simply demonstrated how we can use two-way binding to get inputs from form controls.

Now, we’ll adjust the our code a bit to be able to get this input as a Person instance. So we create a class Person that would represent the model. This is a new TypeScript file Person.ts.

export class Person {
  constructor(
    public firstname: string,
    public lastname: string,
    public email: string,
    public address: string
  ) {
  }
}

Next we create  person object like so:

    this.person = new Person(
      'Kindson',
      'Munonye',
      'thegenius@gmail.com',
      'Budapest, Hungary'
    );

Finally, modify the HTML template like so:

<form>
  Firstname: <input type="text" name="name" [(ngModel)]="person.firstname"><br>
  Lastname: <input type="text" name="latname" [(ngModel)]="person.lastname"><br>
  Email......: <input type="text" name="email" [(ngModel)]="person.email"><br>
  Address: <textarea name="address" [(ngModel)]="person.address"></textarea>
  <br>
  <button (click)="send()">Submit</button>
</form>
<hr>
<h4>Outputs</h4>
<p>{{person | json}}</p>

This time, when you relaunch the application, the inputs are used to create a Person object

Template-Driven Form Submission

In the above example, have actually not done any form submission. Although we can still submit this data by using the person object in the send method. However, we’ll like to now use the features of Template-Driven Form.

To do this, add the attribute to the <form> tag.

#personForm = "ngForm"

The personForm template variable is now a reference to the NgForm directive instance that controls the form as a whole.

Therefore in our template, personForm.value is the same as the person object. So the two lines below gives the same output

<h4>Outputs</h4>
<p>{{person | json}}</p>
<p>{{personForm.value | json}}</p>

Form submission can be achieved in two ways:

1. By responding to the click event of the submit button(this is what we have)
2. Responding to submit event of the form. Requires adding (ngSubmit)=”send()” to the <form> tag

So we’ll stop here. In the next part, we’ll cover reactive forms.