I open-sourced my Angular Template-driven Forms Solution

Intro

If you follow my content, you probably know that I invested a lot of time and energy in Angular Forms (specifically Template-driven Forms). I created an Advanced Template-driven Forms Course That uses an opinionated solution that focuses on:

• Boilerplate less code
• Type-safety
• Reactivity
• Declarative code
• Opinionated model validations
• Automatic validation messages translation form Vest to Angular

I care more about making a difference than sales, so I went ahead and open-sourced the entire solution.

2 versions

template-driven-forms repo

There is the template-driven-forms repo that you can check here and can test directly here on Stackblitz codeflow.

The cool thing about this repo is that it contains the entire complex form that I teach about in my Course The demo application has the following functionality:

• Show validation errors on blur
• Show validation errors on submit
• When first name is Brecht: Set gender to male
• When first name is Brecht and last name is Billiet: Set age and passwords
• When first name is Luke: Fetch Luke Skywalker from the swapi api
• When age is below 18, make Emergency contact required
• When age is of legal age, disable Emergency contact
• There should be at least one phone number
• Phone numbers should not be empty
• When gender is other, show Specify gender
• When gender is other, make Specify gender required
• Password is required
• Confirm password is only required when password is filled in
• Passwords should match, but only check if both are filled in
• Billing address is required
• Show shipping address only when needed (otherwise remove from DOM)
• If shipping address is different from billing address, make it required
• If shipping address is different from billing address, make sure they are not the same
• When providing shipping address and toggling the checkbox back and forth, make sure the state is kept
• When clicking the Fetch data button, load data, disable the form, and patch and re-enable the form

As you can see, a lot of rules, a lot of conditional stuff, but you can play around with it and you have access to the entire codebase!🥰 This is a screen of the Stackblitz environment:

template-driven-forms-starter repo

I also created a second repo: The template-driven-forms-starter repo that you can check here and can test directly here on Stackblitz codeflow.

This is an empty repo/playground that I created for 2 reasons:

• I can start my YouTube video’s starting from this playground (This is the playlist).
• It’s great to test your knowledge and easily import the template-driven-forms logic directly in your project.

The src/app/template-driven-forms directory contains all the code I’ve created for you to ditch all the boilerplate and to start getting crazy productive with Angular forms!💪

Demo

That’s not all, I created a YouTube video where I show you how to get crazy productive with these forms. We create a completely validated form with No boilerplate at all:

This is the typescript part of that simple form…

@Component({
  selector: 'app-simple-form',
  standalone: true,
  imports: [CommonModule, templateDrivenForms],
  templateUrl: './simple-form.component.html',
  styleUrls: ['./simple-form.component.css']
})
export class SimpleFormComponent {
  protected readonly suite = simpleFormValidations;
  protected readonly formValue = signal<SimpleFormModel>({})
}

This is the html of my form element:

<form  [alwaysTriggerValidations]="true"
    [formValue]="formValue()" 
    [suite]="suite" 
    (formValueChange)="formValue.set($event)">
    ...
</form>

And is the amount of code needed to create an input with automatic validation messages:

<div scControlWrapper>
    <label>
        <span>First name</span>
        <input type="text" name="firstName" [ngModel]="formValue().firstName">
    </label>
</div>

We will create a completely type-safe form that is:

• Unidirectional
• Has a firstName, lastName, age, emergencyContact and 2 passwords.
• Has conditional validations
• Has validations on multiple fields (Compare passwords)
• Validates on Blur
• Validates on Submit

This is the result: I created all that in 5 minutes without any boilerplate code!

Check it out here and learn how to become extremely productive with Forms in No-time!

Here is the Stackblitz example from the video.

Follow @TwitterDev