title: Angular 6 Reactive form mapping object
body: <p>I want to map value of my hero object from Reactive form, but it doesn't work.</p>
  <p>Here is my hero-add.component.ts:</p>
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit, Input } from '@angular/core';
  import { Hero } from '../Hero';
  import { HeroService } from '../hero.service';
  import { Router } from '@angular/router';
  import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from
      '@angular/forms';
  
  @Component({
      selector: 'app-hero-add',
      templateUrl: './hero-add.component.html',
      styleUrls: ['./hero-add.component.css']
  })
  export class HeroAddComponent implements OnInit {
      hero: Hero = new Hero();
      myForm = new FormGroup({}) // Instantiating our form
  
      get f() { return this.myForm.controls; }
  
      constructor(private heroService: HeroService, private router: Router,
          private formBuilder: FormBuilder) {
          this.myForm = formBuilder.group({
              publishedYear: [this.hero.Name, [Validators.required,
              Validators.min(1990), Validators.max(2018)]],//I expect this will map value of name from form to my this.hero.Name
              name: [this.hero.PublishedYear, [Validators.required,
              Validators.minLength(2)]] //I expect this will map value of publishedDate from form to my this.hero.Published
          });
      }
  
      ngOnInit() {
      }
  
      addHero() {
          var hr = this.hero;//hr= Hero {} because this.hero = Hero{} 
      }
  }
  </code></pre>
  <p>Here is my hero-add.component.html:</p>
  <pre class="lang-html prettyprint-override"><code> &lt;div&gt;
      &lt;form [formGroup]=&quot;myForm&quot;&gt;
          &lt;div class=&quot;name&quot;&gt;
              &lt;label for=&quot;name&quot;&gt;Name: &lt;/label&gt;
              &lt;input type=&quot;text&quot; id=&quot;Name&quot; formControlName=&quot;name&quot;&gt;
              &lt;p class=&quot;alert alert-danger invalid&quot; *ngIf=&quot;f.name.errors&quot;&gt;Invalid Name&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div class=&quot;publishedYear&quot;&gt;
              &lt;label for=&quot;publishedYear&quot;&gt;Publish Year: &lt;/label&gt;
              &lt;input type=&quot;number&quot; id=&quot;PublishedYear&quot; formControlName=&quot;publishedYear&quot;&gt;
              &lt;p class=&quot;alert alert-danger invalid&quot; *ngIf=&quot;f.publishedYear.errors&quot;&gt;Invalid Published Year&lt;/p&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
      &lt;div class=&quot;complete&quot;&gt;
          &lt;label&gt;Complete&lt;/label&gt;
          &lt;input type=&quot;radio&quot; id=&quot;Complete&quot; name=&quot;Complete&quot; [(ngModel)]=&quot;hero.Complete&quot; value=&quot;true&quot;&gt;Yes
          &lt;input type=&quot;radio&quot; id=&quot;Complete&quot; name=&quot;Complete&quot; [(ngModel)]=&quot;hero.Complete&quot; value=&quot;false&quot;&gt;No
      &lt;/div&gt;
  
      &lt;button (click)='addHero()'&gt;Add new&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I input the field name and published year, then I click button &quot;Add hero&quot; to go to function <code>addHero()</code>. I set a break point in this function and the value of <code>this.Hero</code> is empty. I don't understand why the values don't map from form to my object.</p>
  <p>How can I solve the problem?</p>