import { Component, OnInit } from '@angular/core';

// --- Importo NgForm
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-root-form1',
  template: `
    <!--
      Crero il form dove specifico con una TemplateReferenceVariabile
      che si tratta di ngForm, in questo modo attivo il oneWay data binding
    -->
    <form #f="ngForm" (submit)="add(f)">

      <!--
        con [ngModel] associo questo campo di input
        ad una property di una interfaccia associata
        la porperty sarà qualle definita nell'attributo name
      -->
      <input
        type="text"
        placeholder="Add User name"
        [ngModel]="user?.label"
        name="label"
      >

      <input
        type="number"
        placeholder="Add User age"
        [ngModel]="user?.age"
        name="age"
      >
      <button type="submit">
       {{user ? 'Edit' : 'Add'}}
      </button>
    </form>

    <li *ngFor="let user of users"
      (click)="setActive(user)"
      >
      {{user.label}} ({{user.age}})
    </li>

  `,
  styles: []
})
export class AppComponentForm1Component {
  users: User[] = [];

  user: User;

  add(form: NgForm) {
    this.users.push(form.value as User);
  }

  setActive(user: User) {
    this.user = user;
  }
}


// User interface
interface User {
  label: string;
  age: string;
}