title: Getting all values of a form in angular2
body: <p>I can get the value of a form using the following code:</p>
  
  <pre><code>&lt;input type="text" formControlName="subscriptionFormName" id="subscriptionFormName" #UserName class="form-control" mdbInputDirective&gt;
  &lt;button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit(UserName.value)" mdbWavesEffect&gt;Send
      &lt;i class="fa fa-paper-plane-o ml-1"&gt;&lt;/i&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>but what I need is to get all values of a form so I can do this:</p>
  
  <pre><code>&lt;button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit(allFormValues)" mdbWavesEffect&gt;Send
      &lt;i class="fa fa-paper-plane-o ml-1"&gt;&lt;/i&gt;
  &lt;/button&gt;
  
  user: User;
  ObSubmit(values) {
      user.UserName = values.UserName;
      user.Password = values.Password;
      ......
  }
  </code></pre>
  
  <p>below is the whole code:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-12 text-left"&gt;
  
      &lt;form [formGroup]="subscriptionForm"&gt;
        &lt;h3 style="color: gray; text-align: center;"&gt;Registration&lt;/h3&gt;
  
        &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
            &lt;div class="md-form"&gt;
              &lt;i class="fa fa-user prefix grey-text"&gt;&lt;/i&gt;
              &lt;input type="text" formControlName="UserName" id="UserName" class="form-control" mdbInputDirective&gt;
              &lt;label for="UserName"&gt;Your UserName&lt;/label&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;div class="md-form"&gt;
              &lt;i class="fa fa-user prefix grey-text"&gt;&lt;/i&gt;
              &lt;input type="text" formControlName="FirstName" id="FirstName" class="form-control" mdbInputDirective&gt;
              &lt;label for="FirstName"&gt;Your First name&lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-md-6"&gt;
            &lt;div class="md-form"&gt;
              &lt;i class="fa fa-user-secret prefix grey-text"&gt;&lt;/i&gt;
              &lt;input type="password" id="Password" formControlName="Password" class="form-control" mdbInputDirective&gt;
              &lt;label for="Password"&gt;Your password&lt;/label&gt;
            &lt;/div&gt;
            &lt;br&gt;
            &lt;div class="md-form"&gt;
              &lt;i class="fa fa-user-user prefix grey-text"&gt;&lt;/i&gt;
              &lt;input type="text" id="LastName" formControlName="LastName" class="form-control" mdbInputDirective&gt;
              &lt;label for="LastName"&gt;Your Last name&lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;br&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
            &lt;div class="md-form"&gt;
              &lt;i class="fa fa-envelope prefix grey-text"&gt;&lt;/i&gt;
              &lt;input type="email" id="Email" formControlName="Email" class="form-control" mdbInputDirective&gt;
              &lt;label for="Email"&gt;Your Email&lt;/label&gt;
            &lt;/div&gt;
            &lt;br&gt;
            {{subscriptionForm.value|json}}
            &lt;br&gt;
            &lt;div class="text-center"&gt;
              &lt;button class="btn btn-indigo btn-lg btn-block waves-light" type="button" (click)="OnSubmit()" mdbWavesEffect&gt;Send
                &lt;i class="fa fa-paper-plane-o ml-1"&gt;&lt;/i&gt;
              &lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  import { User } from './../../shared/user.model';
  import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormBuilder, Validators } from '@angular/forms';
  
  @Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.scss']
  })
  export class RegisterComponent implements OnInit {
    subscriptionForm: FormGroup;
    user: User;
  
    constructor(private fb: FormBuilder) {
      this.subscriptionForm = fb.group({
        UserName: ['', Validators.required],
        Password: ['', Validators.required],
        Email:    ['', Validators.required, Validators.email],
        FirstName: ['', Validators.required],
        LastName: ['', Validators.required]
      });
    }
  
    ngOnInit() {
    }
  
    OnSubmit() {
     this.user = this.subscriptionForm.value;
     console.log(this.user);
    }
  
  }
  </code></pre>
  
  <p>When I use the <code>#subscriptionForm="ngForm"</code> I get an error. Probably because of the <code>[formGroup]="subscriptionForm"</code>. I don't know what a reactive form or other forms. I'll study that after this but can you help me with this? Thank you.</p>