Most applications have some type of form. Whether it’s a login and registration form, a form to subscribe to an emailing list or a way to post a status update. Angular has several different ways of creating a form but the most common for simplistic forms such as an email list is a Template Driven Form. They offer two-way data binding. As you change the values in the form, the model for the component updates as well. Is as opposed to the reactive approach where all of the logic is handled in the controller. Click here for access to video tutorials on Angular and other platforms.

Angular Form Template

We’ll create a basic form with Material Angular. This isn’t required but it helps to have a UI library.

<mat-card>
  <form>
    <mat-form-field>
      <input matInput placeholder="First Name" name="firstName" id="firstName">
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Last Name" name="lastName" >
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Address" name="address">
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Email" name="email" >
    </mat-form-field>
    <mat-checkbox id="promotion" name="promotions" >Get Promotions</mat-checkbox>
    <br />
    <button mat-flat-button color="primary">Submit</button>
  </form>
  </mat-card>

This form currently doesn’t contain any logic. Just markup. We’ll also have to create a model class that represents the fields in our form.

export class Subscriber {

    constructor(
        public firstName: string,
        public lastName: string,
        public address: string,
        public email: string,
        public promotions: boolean
    ) { }
}

Inside of the component, we will have to specify how we want to use the model. We’ll create a default model with empty values and an onSubmit method that’s called when we submit the form.

model = new Subscriber('', '', '', '', false);
  onSubmit() {
    alert(JSON.stringify(this.model));
  }

Angular Form Template Logic and Validation

Even though we have our form and our model, we have to have a way to connect them. This can be handled by two-way data-binding. As the data in the model changes, so do the data in the template. The reverse is also true.

<mat-card>
  <form #subscriberForm="ngForm" (ngSubmit)="onSubmit()">
    <mat-form-field>
      <input matInput placeholder="First Name" name="firstName" [(ngModel)]="model.firstName" required id="firstName">
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Last Name" name="lastName" [(ngModel)]="model.lastName"required id="lastName">
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Address" name="address"[(ngModel)]="model.address" id="address">
    </mat-form-field>
    <mat-form-field>
      <input matInput placeholder="Email" email name="email" required [(ngModel)]="model.email" id="email">
    </mat-form-field>
    <mat-checkbox id="promotion" name="promotions" [(ngModel)]="model.promotions">Get Promotions</mat-checkbox>
    <br />
    <button mat-flat-button color="primary">Submit</button>
  </form>
  </mat-card>

ngModel maps to the model’s respective property. If you specify model.email, when you enter information in that field, it changes the email property of the model. Also when you specify required, that field must be entered. You can also have properties such as minLength and email to specify the minimum length of the input and where the data is in email format.

If any of the fields are incorrect, you’ll receive errors.

Invalid Angular Template Form

Invalid Angular Template Form

Once the fields have been filled in correctly, you can then submit the form.

Valid Form Angular

Valid Form Angular

Conclusion

Building forms for Angular are fairly simple. In the next tutorial, we’ll go over building Reactive forms that allow for the validation to be placed inside of the component. The data is immutable and for each change, a new state is returned. Click this link if you’re interested in gaining access to more in-depth videos on Angular and more Front-End and Back-end framework.

Codebrains Newsletter

Get weekly dev news and tutorials.

Powered by ConvertKit