argument of type AbstractControl is not assignable to parameter of type string

Question

I have built a form where I have implemented a form validation that simply displays an error message when the user leaves the email or password field blank. It works perfectly but my problem is that I set the email and password to "AbstractControl" instead of "String" so when I am trying to authenticate them with firebase, I get this error message saying "argument of type AbstractControl is not assignable to parameter of type string". I believe the problem is that I set email and password to abstract control vs setting it to a string. How can I override this and allow the validation to go through and the authentication? Here is my code.

HTML

<ion-content padding>
    <form [formGroup]="formgroup">
        <ion-list>
          <ion-item>
             <ion-label>Email</ion-label>
             <ion-input type="text" formControlName="email" name="email"></ion-input>
          </ion-item>
          <ion-item *ngIf="email.hasError('required') && email.touched">
            <p>*Email is required</p>
          </ion-item>

          <ion-item>
              <ion-label>Password</ion-label>
              <ion-input type="password" name="password" formControlName="password"></ion-input>
           </ion-item>
           <ion-item *ngIf="password.hasError('required') && password.touched">
             <p>*password is required</p>
           </ion-item>
        </ion-list>
      <button clear ion-button (click)="login()">Submit</button>
      </form>
</ion-content>

TS File

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireAuth } from '@angular/fire/auth';
import { SignupPage } from '../signup/signup';
import { Validators, FormBuilder, FormGroup, AbstractControl } from '@angular/forms';
/**
 * Generated class for the ProfilePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html',
})
export class ProfilePage {

  email: AbstractControl;
  password: AbstractControl; 
  formgroup: FormGroup;

  constructor(public formbuilder: FormBuilder, public aAuth : AngularFireAuth, public navCtrl: NavController, public navParams: NavParams) {

    this.formgroup = formbuilder.group({
      email:['',Validators.required],
      password:['',Validators.required]
    });

    this.email = this.formgroup.controls['email'];
    this.password = this.formgroup.controls['password'];
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  login(){
   this.aAuth.auth.signInWithEmailAndPassword(this.email, this.password).then(
     e => {console.log(e)}
     )
  }

  goToSignup(){
    this.navCtrl.push(SignupPage)
  }

}

Answer 1

Well, the error messages says it all. The error is because signInWithEmailAndPassword requires strings but you've called it with AbstractControls.

You can get the value of an AbstractControl using the value property on it.

Change your login method to this:

login() {
  this.aAuth.auth.signInWithEmailAndPassword(this.email.value, this.password.value)
    .then(e => console.log(e))
}

Quick Tip:

Not sure why you created the email and password properties on your Component, when you could have easily gotten the value of the form using this.formgroup.value and then you could have also used destructuring to extract the email and password from the form value and then pass it to the signInWithEmailAndPassword method:

login() {
  const { email, passowrd } = this.formgroup.value;
  this.aAuth.auth.signInWithEmailAndPassword(email, password)
    .then(e => console.log(e))
}