I am making photosharing app in which i wants to made login system . When login then its gives error like value not found .In services i am geting value .Please help me how to to get email and password in login.page.ts in ionic below are my code which is i am coded.....
login.page.ts
import { Component, OnInit } from '@angular/core';
import { NavController, MenuController, ToastController, AlertController, LoadingController } from '@ionic/angular';
import { Router, ActivatedRoute } from '@angular/router';
import { User } from '../user';
import { first } from 'rxjs/operators';
import { UserService } from '../user.service'
import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
public onLoginForm: FormGroup;
submitted = false;
constructor(public navCtrl: NavController,
public menuCtrl: MenuController,
public toastCtrl: ToastController,
public alertCtrl: AlertController,
public loadingCtrl: LoadingController,
private formBuilder: FormBuilder,
private userService: UserService,
public router: Router) {
}
ionViewWillEnter() {
this.menuCtrl.enable(false);
}
ngOnInit() {
this.onLoginForm = this.formBuilder.group({
'email': [null, Validators.compose([
Validators.required,
Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')
])],
'password': [null, Validators.compose([
Validators.required,
Validators.pattern('^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9]+$')
])]
});
}
onSubmit() {
this.submitted = true;
console.log(this.onLoginForm.value);
this.userService.login(this.onLoginForm.email.value,
this.onLoginForm.password.value)
.pipe(first())
.subscribe(
data => {
if (data.status === false) {
alert("Please enter valid Email Or Password");
this.router.navigate(['login']);
}
else {
this.router.navigate(['blog-list']);
}
}
);
}
}
Below are my userservice in which i am calling the laravel-passport api.
user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {User} from './user';
import { map } from 'rxjs/operators';
import { HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class UserService {
token: any;
constructor(private http: HttpClient) { }
register(user: User) {
return this.http.post(`http://localhost:8000/api/register`, user);
}
login(email: string, password: string) {
return this.http.post<any>(`http://localhost:8000/api/login`, { email, password })
.pipe(map(user => {
return user;
}));
}
}
