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

import { Hero, magicFormBuilder } from "./index";
import { FormGroup } from "@angular/forms";

@Component({
  selector: 'app-root',
  template: `
  <form [formGroup]="heroForm">
  <div class="form-group">
    <label class="center-block">ID:
      <input class="form-control" formControlName="id">
    </label>
    <label class="center-block">Name:
      <input class="form-control" formControlName="name">
    </label>
  </div>
</form>

{{ heroForm.valid }}
  `
})
export class AppComponent implements OnInit {

  public heroForm: FormGroup;

  ngOnInit() {
    const hero = new Hero();
    this.heroForm = magicFormBuilder(hero);
  }
}