Cory Rylan

My name is . Google Developer Expert, speaker, and Software Developer at VMware Clarity Design System.

Follow @coryrylan
VMWare Clarity

Building forms with Angular and Clarity Design

Cory Rylan

- 3 minutes

This article has been updated to the latest version Angular 12 and tested with Angular 11. The content is likely still applicable for all Angular 2 + versions.

Clarity is an open-source design system for Web UI. The Clarity Design System is built and maintained by VMware. Clarity supports many different frameworks, including Angular, React, Vue, or event just plain JavaScript.

In this post, we will learn how to build a login form with Angular and the latest version of Clarity.

Clarity Design Web Components in Angular

First, you will want to follow the get started guide to install Clarity to your Angular application.

Clarity components are built using Web Components, which allows the components to work in any UI framework. To build our Angular form, we will use the Reactive Forms Module.

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import '@cds/core/forms/register.js';
import '@cds/core/input/register.js';
import '@cds/core/password/register.js';
import '@cds/core/button/register.js';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
form: FormGroup;

get email() {
return this.form.controls.email;
}

get password() {
return this.form.controls.password;
}

constructor(private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.required]
});
}
}

The Reactive Forms Module provides an API to set and get input updates as well as validation messaging. Below is the basic HTML template used to connect our inputs to the Angular form. We can bind the form group and each form control name to the inputs.

<form [formGroup]="form" (ngSubmit)="submit()">
<label>Email</label>
<input formControlName="email" type="email" />

<label>Password</label>
<input formControlName="password" type="password" value="hello there" />
</form>

While this will enable us to get value updates from our form, let's add some components from Clarity to get the appropriate UI and validation.

<form [formGroup]="form" (ngSubmit)="submit()">
<cds-form-group>
<cds-input>
<label>Email</label>
<input formControlName="email" type="email" />
</cds-input>

<cds-password>
<label>Password</label>
<input formControlName="password" type="password" value="hello there" />
</cds-password>

<cds-button type="submit">login</cds-button>
</cds-form-group>
</form>

The cds-input and cds-password components provide the Clarity look and feel but also ensure the accessibility is appropriately set up.
Clarity also provides a component called cds-form-control. This component provides messaging validation.

<form [formGroup]="form" (ngSubmit)="submit()">
<cds-form-group>
<cds-input>
<label>Email</label>
<input formControlName="email" type="email" />
<cds-control-message *ngIf="email.touched && email.hasError('required')" status="error">required</cds-control-message>
<cds-control-message *ngIf="email.touched && email.hasError('email')" status="error">invalid email</cds-control-message>
</cds-input>

<cds-password>
<label>Password</label>
<input formControlName="password" type="password" value="hello there" />
<cds-control-message *ngIf="password.touched && password.hasError('required')" status="error">required</cds-control-message>
</cds-password>

<cds-button type="submit">login</cds-button>
</cds-form-group>
</form>

The cds-control-message component has a status property that can be set to success or error. Using *ngIf, we can toggle when the error messages are shown to the user.

Clarity Design Web Components in Angular

Angular has fantastic support for Web Components, and Clarity provides a full suite of UI components for your application needs. Check out the full working demo below!x

View Demo Code   
 

No spam. Short occasional updates on Web Development articles, videos, and new courses in your inbox.

Related Posts

CSS

Resilient CSS APIs and Design Systems

Design Systems need to handle hostile runtime environments. Improve reliability and developer experience with thoughtful API design in CSS.

Read Article
Angular JS

Using Web Components in AngularJS

Learn how to leverage Web Components to help migrate and upgrade AngularJS applications.

Read Article
VMWare Clarity

Reactive Forms with Clarity UI and Angular

Learn how to create forms with the Clarity UI library and the Angular Reactive Forms API.

Read Article