Currently, I am working on validating a sign-up form and authenticating user email and password using Firebase.
export class SignupPage {
signupForm :FormGroup;
user_name :AbstractControl;
user_email :AbstractControl;
acc_type: AbstractControl;
user_password:AbstractControl;
pushPage: any;
params: Object;
submitAttempt: boolean = false;
emailRegx: any;
label: any = {};
user = {} as User;
constructor(public navCtrl: NavController, public navParams: NavParams
,public formbuilder:FormBuilder, public alertCtrl: AlertController, private
afauth: AngularFireAuth) {
this.signupForm = formbuilder.group({
user_name: ['', Validators.compose([Validators.maxLength(30),
Validators.pattern('[a-zA-Z ]*'), Validators.required])],
user_email: ['', Validators.required],
user_password: ['', Validators.compose([Validators.maxLength(40),
Validators.required])],
acc_type: ['', Validators.required]
});
}
ionViewDidLoad() {
console.log('ionViewDidLoad SignupPage');
}
showAlert() {
let alert = this.alertCtrl.create({
title: 'Great!',
subTitle: 'We are about to Verify Your Account, verify with 4546!',
buttons: ['Let\'s verify']
});
alert.present();
}
openLoginPage(){
this.navCtrl.push(LoginPage)
}
createAccount(){
this.submitAttempt = true;
if(!this.signupForm.valid){
}
else {
console.log("success!")
this.showAlert()
this.navCtrl.push(EmailverPage)
}
}
async register(user: User){
try{
const result = await
this.afauth.auth.createUserWithEmailAndPassword(user.user_email ,
user.user_password)
console.log(result);
}
catch(e) {
console.error(e)
}
}
}
HTML Code
<ion-grid>
<ion-row>
<ion-col text-center col-4 float-end >
<p class="pagetitle">Create Account</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12 pager>
<form class="signupForm" [formGroup]="signupForm">
<ion-item class="input1">
<ion-label floating>
<ion-icon name="person"></ion-icon>
Full Name</ion-label>
<ion-input type="text" [(ngModel)]="user_name"
formControlName="user_name"
[class.invalid]="!signupForm.controls.user_name.valid &&
(signupForm.controls.user_name.dirty || submitAttempt)"></ion-input>
</ion-item>
<ion-item *ngIf="!signupForm.controls.user_name.valid &&
(signupForm.controls.user_name.dirty || submitAttempt)">
<p>Please enter a valid name.</p>
</ion-item>
<ion-item class="">
<ion-label floating>
<ion-icon name="mail"></ion-icon>
Email</ion-label>
<ion-input formControlName="user_email"
[(ngModel)]="user_email" pattern="" type="Email"
[class.invalid]="!signupForm.controls.user_email.valid &&
(signupForm.controls.user_email.dirty || submitAttempt)"></ion-input>
</ion-item>
<ion-item *ngIf="!signupForm.controls.user_email.valid &&
(signupForm.controls.user_email.dirty || submitAttempt)">
<p>Please enter a valid email.</p>
</ion-item>
<ion-item>
<ion-label floating>
<ion-icon name="checkbox"> </ion-icon>
Account type </ion-label>
<ion-select interface="popover" formControlName="acc_type"
name="acc_type" [(ngModel)]="acc_type"
[class.invalid]="!signupForm.controls.acc_type.valid &&
(signupForm.controls.acc_type.dirty || submitAttempt)">
<ion-option value="1" selected="true"> Client </ion-option>
<ion-option value="2"> Company </ion-option>
</ion-select>
</ion-item>
<ion-item *ngIf="!signupForm.controls.acc_type.valid &&
(signupForm.controls.acc_type.dirty || submitAttempt)">
<p>Please Select Your Account Type.</p>
</ion-item>
<ion-item>
<ion-label floating>
<ion-icon name="lock"></ion-icon>
Password
</ion-label>
<ion-input type="password" [(ngModel)]="user_password"
name="user_password" formControlName="user_password"
[class.invalid]="!signupForm.controls.user_password.valid &&
(signupForm.controls.user_password.dirty || submitAttempt)">
</ion-input>
</ion-item>
<ion-item *ngIf="!signupForm.controls.user_password.valid &&
(signupForm.controls.user_password.dirty || submitAttempt)">
<p>Please enter a valid email.</p>
</ion-item>
<ion-item class="input2">
<button class="regButton" type="submit" ion-button full
round (click)="register(user)" >Sign Up</button>
</ion-item>
</form>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-12 float-end >
<p style="text-align:center;color: aliceblue;"> Already have an
account? <a (click)="openLoginPage()"> Log in </a></p>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
While testing the code, I encountered the following console message:
Code: "auth/argument-error", Message: "CreateUserWithEmailAndPassword failed: First argument "email" must be a valid string."