title: How to get values of reactive form inputs in Angular?
body: <p>I need to grab reactive form inputs <code>email</code> and <code>password</code> and pass them to my function which calls register service method to register new user in firebase using email. Unfortunately, in chrome console after form submission I get <code>RegisterComponent.html:2 ERROR ReferenceError: email is not defined</code></p>
  
  <p>My code looks like this now:</p>
  
  <p>register.component.ts</p>
  
  <pre><code>export class RegisterComponent {
    form: FormGroup;
  
    constructor(fb: FormBuilder, private authService: AuthService) {
      this.form = fb.group({
    email:['',Validators.required ],
    password:['',Validators.compose([Validators.required,
      PasswordValidator.cannotContainSpace])]
      })
      email = this.form.controls['email'].value;
      password = this.form.controls['password'].value;
     }
  
  
     signInWithEmail() {
       this.authService.regUser(this.email, this.password);
     }
  }
  </code></pre>
  
  <p>my AuthService file:</p>
  
  <pre><code> regUser() {
      firebase.auth().createUserWithEmailAndPassword(email, pass)
   .catch(function(error) {
     // Handle Errors here.
     var errorCode = error.code;
     var errorMessage = error.message;
     // ...
   });
  console.log(this.form.controls['email'].value);
      }
  </code></pre>
  
  <p>It's just part of my code that relates to the question. I'm not including register form as it's big and messy so I don't think you need to see it. Thanks in advance.</p>
  
  <p>EDIT: </p>
  
  <p>register.component.html </p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;form [formGroup]="form" (ngSubmit)="signInWithEmail()"&gt;
      &lt;div class="form-group"&gt;
         &lt;label for="email"&gt;Email&lt;/label&gt;
          &lt;input type="email" class="form-control" formControlName="email"&gt;
         &lt;div *ngIf="form.controls.email.touched
          &amp;&amp; !form.controls.email.valid" class="alert alert-danger"&gt;
              Email is required
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
      &lt;label for="password"&gt;Password&lt;/label&gt;
      &lt;input type="password" class="form-control" formControlName="password"&gt;
      &lt;div *ngIf="form.controls.password.touched &amp;&amp; form.controls.password.errors"&gt;
          &lt;div *ngIf="form.controls.password.errors.invalidLogin"
  class="alert alert-danger"&gt;
              Email or password is invalid.
          &lt;/div&gt;
          &lt;div *ngIf="form.controls.password.errors.required"
  class="alert alert-danger"&gt;
              Password is required.
          &lt;/div&gt;
          &lt;div *ngIf="form.controls.password.errors.cannotContainSpace"
  class="alert alert-danger"&gt;
              Password cannot contain space.
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;button class="btn btn-primary" type="submit"&gt;Register&lt;/button&gt;
  
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/sPvIC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sPvIC.png" alt="enter image description here"></a></p>