argument of type AbstractControl is not assignable to parameter of type string
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)
angular ionic3
add a comment |
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)
angular ionic3
add a comment |
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)
angular ionic3
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)
angular ionic3
angular ionic3
asked Nov 15 '18 at 16:05
lonce1944lonce1944
144
144
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Well, the error messages says it all. The error is because signInWithEmailAndPassword
requires string
s but you've called it with AbstractControl
s.
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))
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53323411%2fargument-of-type-abstractcontrol-is-not-assignable-to-parameter-of-type-string%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Well, the error messages says it all. The error is because signInWithEmailAndPassword
requires string
s but you've called it with AbstractControl
s.
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))
add a comment |
Well, the error messages says it all. The error is because signInWithEmailAndPassword
requires string
s but you've called it with AbstractControl
s.
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))
add a comment |
Well, the error messages says it all. The error is because signInWithEmailAndPassword
requires string
s but you've called it with AbstractControl
s.
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))
Well, the error messages says it all. The error is because signInWithEmailAndPassword
requires string
s but you've called it with AbstractControl
s.
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))
edited Nov 15 '18 at 16:58
answered Nov 15 '18 at 16:07
SiddAjmeraSiddAjmera
16k31239
16k31239
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53323411%2fargument-of-type-abstractcontrol-is-not-assignable-to-parameter-of-type-string%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown