Cacher is the code snippet organizer for pro developers

user.interface.ts

export interface User {
    name: string; // text
    age?: number; // number
    gender?: string; // radio
    role?: string; // select (primitive)
    theme?: Theme; // select (object)
    topics?: string[]; // multiple select 
    isActive?: boolean; // checkbox
    toggle?: string; // checkbox toggle either 'toggled' or 'untoggled'
}

theme.interface.ts

export interface Theme {
    display: string;
    backgroundColor: string;
    fontColor: string;
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from './user.interface';
import { Theme } from './theme.interface';

@Component({
    moduleId: module.id, //?
    selector: 'my-app',
    templateUrl: 'app.component.html',
    directives: []
})
export class AppComponent implements OnInit {

    public user: User; // en lugar de models usa interfaces, por que?
    
    /* standing data (ver en cada caso de cada input) */

    ngOnInit() {
        // initialize user model
      this.user = {
        name: '',
        gender: this.genders[0].value, // default to Female
        role: null,
        theme: this.themes[0], // default to dark theme
        isActive: false,
        toggle: this.toggles[1].value, // default to untoggled
        topics: [this.topics[1].value] // [] MAKES THE FIELD AN ARRAY //default to Technology
      }
    }

    public save(isValid: boolean, f: User) {
        console.log(f);
    }
}

app.component.html

<form #f="ngForm" novalidate>
    <!-- We'll add our form controls here -->
    <button type="submit" (click)="save(f.value, f.valid)">Submit</button>
</form>

Text / Number input

You need the name attribute, and ngModel.

<div>
    <label>Name</label>
    <input type="text" name="name" [(ngModel)]="user.name">
</div>
<div>
    <label>Age</label>
    <input type="number" name="age" [(ngModel)]="user.age">
</div>

Radio button

We have this list of genders:

public genders = [
    { value: 'F', display: 'Female' },
    { value: 'M', display: 'Male' }
];

When select, we want only the value F or M:

<div>
  <label>Gender</label>
  <div *ngFor="let gender of genders"> 
    <label>
      <input type="radio" name="gender" 
             [(ngModel)]="user.gender" //bindeamos con la propiedad del model que queramos
             [value]="gender.value"> //componemos las opciones a partir del array de 'genders'
      {{gender.display}}
    </label>
  </div>
</div>

Select

1. Primitive type

We have a list of roles:

public roles = [
    { value: 'admin', display: 'Administrator' },
    { value: 'guest', display: 'Guest' },
    { value: 'custom', display: 'Custom' }
];

When value selected, we expected it to return string value admin, guest or custom:

<div>
    <label>Role</label>
    <select name="role" [(ngModel)]="user.role"> //bindeamos con la propiedad del model que queramos
        <option *ngFor="let role of roles" [value]="role.value"> //componemos las opciones a partir del array de 'roles' 
        {{role.display}}
        </option>
    </select>
</div>

2. Object

Instead of simple type, we want the whole object when it’s selected.
We have the list of themes:

public themes: Theme[] = [ //array de elementos del tipo Theme (porqué lo usa así en lugar de con models?)
    { backgroundColor: 'black', fontColor: 'white', display: 'Dark' },
    { backgroundColor: 'white', fontColor: 'black', display: 'Light' },
    { backgroundColor: 'grey', fontColor: 'white', display: 'Sleek' }
];

When selected, for example Light theme, we expect { backgroundColor: 'white', fontColor: 'black', display: 'Light' } to be returned. Instead of binding to the value property, we bind to ngValue property.

<div>
    <label>Theme</label>
    <select name="theme" [(ngModel)]="user.theme">
        <option *ngFor="let theme of themes" [ngValue]="theme">  
            {{theme.display}}
        </option>
    </select>
</div>

Select multiple

when selecting game and tech, it should return ['game', 'tech'].

public topics = [
    { value: 'game', display: 'Gaming' },
    { value: 'tech', display: 'Technology' },
    { value: 'life', display: 'Lifestyle' },
];

Similar to select, but this time our model is array of string: topics: []

<div>
    <label>Topics</label>
    <select multiple name="topics" [(ngModel)]="user.topics">
        <option *ngFor="let topic of topics" [value]="topic.value">  
            {{topic.display}}
        </option>
    </select>
</div>

Checkbox

1. Boolean

By default, checkbox return boolean.

<div>
    <label>
        <input type="checkbox" name="isActive" [(ngModel)]="user.isActive">
        Is Active
    </label>
</div>

2. Toggle value

Instead of boolean, we expecting value. When checked, it should return toggled, else return value untoggled.

public toggles = [
    { value: 'toggled', display: 'Toggled' },
    { value: 'untoggled', display: 'UnToggled' },
];

How we do it:

<div>
    <input type="hidden" name="toggle" [(ngModel)]="user.toggle"> // we define a hidden input to bind to the real model
    <div>
      <label>
        <input type="checkbox" 
               [checked]="user.toggle === toggles[0].value"  //handle the 'checked' property
               (change)="$event.target.checked ? (user.toggle = toggles[0].value) : (user.toggle = toggles[1].value)"> // 'change' event fire every time value change: we read the $event.target.checked to find out if the checkbox is checked, then update model value accordingly
            {{ toggles[0].display }}
      </label>
    </div>
</div>

During development, visualize the values: <pre>{{your_form or control_name | json }}</pre>