Template-driven forms with form arrays in #Angular

Hi folks!!??????

People that followed my stuff lately, might know that I made the switch towards #Angular template-driven forms. The Angular core team suggested reactive forms back in Angular 4 and just like everyone else, I made the jump towards reactive forms back then. I was never really happy with them since I found them:

• Complex
• Imperative
• Not type-safe (back then)
• Basically I found them a lot of work and I still had to connect everything in my template

The big selling point of reactive forms was testability. Since reactive forms are objects and the configuration lied within the class, it was easier to write tests for them.

I believe that the html should be tested along with the typescript so I don't believe this is a valid selling point anymore.

The next point was reactivity. Reactive forms can give you access to observables which plays nicely with #RxJS...

Well, template-driven forms spit out reactive FormControl and FormGroup instances anyway, so you can still enjoy these benefits while letting angular do all the work for you. In this article I explain the difference between the template-driven forms and reactive forms approach: https://blog.simplified.courses/template-driven-or-reactive-forms-in-angular/ People started saying that validations were way easier with reactive forms so I countered those arguments in this article as well: https://blog.simplified.courses/say-goodbye-to-custom-form-validators-in-angular/

Check out this code for instance. No boilerplate anymore!??

<form [model]="vm.form" [suite]="suite" ...
    <label inputWrapper>
        <span>First name</span>
        <input type="text" [ngModel]="vm.form.firstName" name="firstName" />
    </label>

    <label inputWrapper>
        <span>Last name</span>
        <input type="text" [ngModel]="vm.form.lastName" name="lastName" />
    </label>
    <app-address ...></app-address>
    <div ngModelGroup="passwords" inputWrapper>
        <h2>Password</h2>
        <label>
            <span>Password</span>
            <input
                type="password"
                [ngModel]="vm.form.passwords.password"
                name="password"
            />
        </label>
        <label>
            <span>Confirm password</span>
            <input
                type="password"
                [ngModel]="vm.form.passwords.confirmPassword"
                name="confirmPassword"
            />
        </label>
    </div>
  </form>        

This is not what this post is about though. It is about using FormArray functionality in template-driven forms. A FormArray is a class from the @angular/reactive-forms package and is unavailable for template-driven forms. It is quite handy because it let's you work with iterative stuff like adding/updating/removing phonenumbers. I've created an article showing you how you can achieve the same functionality with template-driven forms. It's super easy, and again, we let angular do all the work for us. Check it out here: https://blog.simplified.courses/template-driven-forms-with-form-arrays

<div ngModelGroup="phonenumbers"
        <div class="phonenumber" 
            *ngFor="let item of vm.user.phonenumbers|keyvalue; trackBy: tracker">
            <input type="text" 
                [ngModel]="vm.user.phonenumbers[item.key]" 
                name="{{item.key}}" />
            <!-- Delete the phonenumber based on the key -->
            <button type="button" (click)="deletePhonenumber(item.key)">
                Delete phonenumber
            </button>
        </div>
</div>>        

If you like this content you can subscribe to my newsletter. If you need more help we are offering Angular Coaching and Angular Training as well!

Cheers!

Brecht