title: How to access the value of input fields from .ts file in reactive forms
body: <p>In the simple <code>NgForm</code> I used to pass the value of <code>#myForm="ngForm"</code> in the parameter in the function and it used to work but it doesn't work in the reactive form.
  <code>e.controls.first_name.value</code> and <code>e.controls</code> doesn't fetch the values of the input fields inside the ts file. I want to fetch those values so that it can be passed in the <code>registerUser</code> method.   </p>
  
  <pre><code>&lt;form method="post" [formGroup]="registerForm" (ngSubmit)="onSubmit()"&gt;
                &lt;div id="tab-2" class="log-tab-content"&gt;
                  &lt;div class="login-form"&gt;
  
                    &lt;div class="login-left"&gt;
                      &lt;input type="text" name="first_name" placeholder="First Name *"/&gt;
                      &lt;div class="clearfix"&gt;&lt;/div&gt;
                      &lt;input type="text" name="email" placeholder="Email *"/&gt;
                      &lt;div class="clearfix"&gt;&lt;/div&gt;
                      &lt;input type="text" name="password" placeholder="Password *"/&gt;
                      &lt;div class="clearfix"&gt;&lt;/div&gt;
                    &lt;button type="submit" class="log-button log-button1"&gt;Register now&lt;/button&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>ts file</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { AuthService } from '../services/auth.service';
  import { DataService } from '../services/data.service';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  @Component({
    selector: 'app-x-home',
    templateUrl: './x-home.component.html',
    styleUrls: ['../app.component.css', './x-home.component.css']
  })
  export class XHomeComponent implements OnInit {
  
    timezones: Object;
    registerForm: FormGroup;
    submitted = false;
  
    constructor(private reg: AuthService, private data: DataService, private formBuilder: FormBuilder) { }
    registered: boolean = false;
    ngOnInit() {
      this.data.getTimeZone().subscribe(storeData=&gt; {
        this.timezones = storeData;
      })
      this.registerForm = this.formBuilder.group({
        first_name: ['', Validators.required]
      })
    }
  
    get e() { return this.registerForm.controls; }
  
    onSubmit(e) {
      const user = {
        first_name: e.controls.first_name.value,
        last_name: e.controls.last_name.value,
        email: e.controls.email.value,
        c_email: e.controls.c_email.value,
        password: e.controls.password.value,
        c_password: e.controls.c_password.value,
        birth_date: e.controls.birth_date.value,
        phone: e.controls.phone.value,
        timezone: e.controls.timezone.value
      };
      console.log(e.controls);
      console.log(e.first_name.value);
      console.log();
  
      this.reg.registerUser(user).subscribe(
        (res) =&gt; {
            this.registered = res ? true : false;
            // console.log(this.registered);      
        },
        (err) =&gt; {
            console.log(err); 
        }
     );
    }
  }
  </code></pre>