Основа ЛР6_1
.docx
Содержание
Задания 2
Описание проделанной работы 3
Вывод 7
Задания
Инициализировать и валидировать поля в формах входа и регистрации.
Организовать получение данных о пользователях с сервера.
Цель работы: Инициализация и валидация форм. Работа с сервером.
Описание проделанной работы
Файл login.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UserService } from 'src/app/shared/services/users.service';
import { User } from 'src/app/shared/models/user.model';
import { Message } from '@angular/compiler/src/i18n/i18n_ast';
import { AuthService } from 'src/app/shared/auth.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
form: FormGroup;
message: Message;
constructor(
private userServices: UserService,
private authService: AuthService
) { }
ngOnInit() {
this.message = new Message ('danger', '');
this.form=new FormGroup({
'email': new FormControl (null,[Validators.required,Validators.email]),
'password':new FormControl (null,[Validators.required,Validators.minLength(6)])
});
}
private showMessage (text: string, type: string ='danger'){
this.message = new Message (type, text);
window.setTimeout (()=>{
this.message.text = '';
}, 5000);
}
onSubmit(){
const formData= this.form.value;
this.userServices.getUserByEmail(formData.email)
.subscribe ((user: User)=>{
if (user) {
if (user.password === formData.password){
this.message.text='';
window.localStorage.setItem('user', JSON.stringify(user));
this.authService.login();
}else {
this.showMessage('Пароль не верный');
}
}else {
this.showMessage('Такого пользователя не существует');
}
});
}
Файл User.service.ts
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';//
import { User } from '../models/user.model';
@Injectable()
export class UserService {
constructor (private http: Http){}
getUserByEmail (email: string): Observable<User> {
return this.http.get('http://localhost:3000/users?email=$(email)')
.map ((response: Response)=> response.json());
.new Map((user: User[]) => user[0] ? user[0] : undefined); //
}
}
Рис. 1 Файл message.models.ts
Рис.2 Файл user.models.ts
Файл login.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--meta http-equiv="x-ua-compatible"content="ie=edge"-->
<title>Курсач 1.0</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<form>
<!--app-root></app-root-->
<router-outlet>Loading...</router-outlet>
<!--блок-->
<div class="form-group"
[ngClass]="('has-error': form.get('password').invalid && form.get('password').touched)"
>
<label for="password">пароль</label>
<input
type="password"
class="form-control underlined"
id="password"
placeholder="пароль"
formControlName="password"
>
<span
class="form-help-text"
*ngIf="form.get('password').invalid && form.get('password').touched"
>
<span *ngIf="form.get('password')['errors']['required']">пароль не может быть пустым</span>
<span *ngIf="form.get('password')['errors']['minLength']">
<!-- чооооооооо происходит-->
Пароль должен иметь больше {{form.get('password')['errors']['minLength']['requiredLength']}
символов. Сейчас {{form.get('password')['errors']['minLength']['actualLength']}}.
</span>
</span>
</div>
<!-- блок отвечающий за валидацию поля email-->
<div class="form-group"
[ngClass]="('has-error': form.get('email').invalid && form.get('email').touched)">
<label for="email">email</label>
<input
type="text"
class="form-control underlined"
id="email"
placeholder="Введите ваш email"
formControlName="email"
>
<span
class="form-help-text"
*ngIf="form.get('email').invalid && form.get('email').touched"
>
<span *ngIf="form.get('email')['errors']['required']">email не может быть пустым</span>
<span *ngIf="form.get('email')['errors']['email']">Введите корректный email </span>
error
</span>
</div>
<!-- след блок-->
<div class="form-group">
<button
type="submit"
class="btn btn-block btn-primary"
[disabled]="form.invalid">
Войти
</button>
</div>
<!-- Блок для вывода сообщения об ошибке-->
<p class="text-xs-center">Войдите для работы</p>
<div class="alert alert={{message.type}}"
*ngIf="message.text"
>{{message.text}}</div><!--чоооо -->
<div>
<p class="taxt-muted text-xs-center">
Нет аккаунта?<a [routerLink]="'/registration'">Зарегистрироваться!</a>
</p>
</div>
</form>
</body>
</html>
Вывод
В процессе выполнения данной лабораторной работы было изучено инициализация и валидация форм, работа с сервером . Задания выполнены.