Добавил:
выбрасываю тут свой мусор, надеюсь, что он кому-то может пригодится... Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

Основа ЛР6_1

.docx
Скачиваний:
5
Добавлен:
03.12.2023
Размер:
88.44 Кб
Скачать

Содержание

Задания 2

Описание проделанной работы 3

Вывод 7

Задания

  1. Инициализировать и валидировать поля в формах входа и регистрации.

  2. Организовать получение данных о пользователях с сервера.

Цель работы: Инициализация и валидация форм. Работа с сервером.

Описание проделанной работы

Файл 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>

Вывод

В процессе выполнения данной лабораторной работы было изучено инициализация и валидация форм, работа с сервером . Задания выполнены.

Соседние файлы в предмете Web технологии