Reactive or template form?

Question

This is more of an approach based question rather than a coding question. I have to create a form with 3 fields i.e Name, Description, and text

this is what my mod.ts looks like.

mod.ts

export interface Mod {
  id: number,
    name ? : string,
    clauseList: Clause
}

export interface Clause {
  cName ? : string,
    cid ? : number,
    description: string,
    id ? : number,
    text ? : Text
}


export interface Text {
  cid: number
  txt ? : string,
    tid ? : number

}

My first question is should I go for template-driven forms or reactive forms for this project?

One of the requirements from the 3rd field is that every time the user hits enter, the tid should increment by 1 and whatever the user enters should be saved as a different formgroup. cid should be that of Clause object. for example :

txt = "hi",
tid =1,
cid = 1 

after pressing enter

txt = "welcome to our shop",
tid = 2,
cid = same as above

Can anyone help me with this? For a better reference I will post another of my questions which kinda uses the same format, It might help you figure out this question better TypeScript for loop in a nested Array?

My contact lenses have dried up, I have been staring for too long at my screen. Please ask me for more clarification. May the force be with you.

Answer 1

Use Reactive Form

Reasons:- Easy to create dynamic formGroup dynamic form

• Entire control of the form is in your hands.
• Highly unit testable

Answer 2

It depends on the requirement you have. Lets say if you have to create some Login/Registration form, validation comes into picture and showing inline validation error messages considered as good user experience instead of in some Toastr. For such cases 'Reactive Forms' are used. For simple forms or just to collect some sort of data you can go with Template driven forms.

To hold values on every key Enter:

HTML:

TS:

public formVal = [];
txt = '';
name = '';
desc = '';

onEnter(event) {
    if (event && event.keyCode === 13) {
        const obj = {
            name: this.name,
            desc: this.desc,
            txt: this.txt
        };
        formVal.push(obj);
    }
}

Answer 3

Use Template Forms

Much easier to learn and maintain.

No double handling of data, just bind your model to your template instead of having to create form objects and bind them to your template.

Easy to create reusable validation attributes, a little bit more boiler plate that reactive validators but the same functions.

Highly unit testable and you are testing the actual template bindings, not just an object that might be incorrectly bound in your template. You just need to awaits a component update which can be easily abstracted away into a helper function.

Answer 4

Reactive Forms provides a rich API for managing forms of any complexity, it's highly testable and maintainable, it allows you to easily create dynamic forms and apply complex validation, so it's suitable for almost every form. Template Forms are suitable for only some simple things when you need just to bind some input without any validation, for example, the search field.

Answer 5

Here is an actual answer to the question rather than just template forms vs reactive forms. I am using template forms in this answer.

https://stackblitz.com/edit/angular-bmcapk

Have an array of your mods

mods = [{ id: 0 }]; // This is a simplified model for mod, but demonstrates the principal.

and in the template

<ng-container *ngFor="let mod of mods">
  <label>
    Name<input [name]="'name_' + mod.id" [(ngModel)]="mod.name" autoFocus>
  </label><br>
  <label>
    Desc
    <input [name]="'description_' + mod.id" [(ngModel)]="mod.description">
  </label><br>
  <textarea [name]="'text_' + mod.id" [(ngModel)]="mod.text" (keydown)="checkKey($event)"></textarea><br>
</ng-container>

Iterate over the array of mods and bind each mod to your form, use the id to create a unique name for each form field.

checkKey(e) {
  if (e.keyCode === 13) {
    this.mods.push({ id: this.mods[this.mods.length - 1].id + 1 });
    e.preventDefault();
  }
}

In the text field I have a keydown check to see if enter has been pressed. If it has add another mod to the array with an incremented id and prevent default to stop a new line being added to the textbox.

There is also a directive called autoFocus on the name so that when it first appears focus is taken from the text and put on the newly created mod's name.

@Directive({
    selector: '[autoFocus]'
})
export class AutofocusDirective {
  public constructor(private el: ElementRef) {
    setTimeout(() => { el.nativeElement.focus(); });
  }
}