0

Caros, boa tarde, Gostaria de saber como fazer para mostrar uma mensagem de usuário ou senha inválidos em angular 4.` Login Olá! Faça login com seu email

<div class="row">
    <div class="input-field col s12">
        <div class="form-group">
            <label for="input-email" class="sr-only">Digite seu email</label>
            <input [(ngModel)]="_user.email" id="usuario" class="form-control" placeholder="Digite seu email">
        </div>
        <div class="form-group">
            <label for="input-password" class="sr-only">Password</label>
            <input [(ngModel)]="_user.password" id="senha" type="password" class="form-control" placeholder="Senha">
        </div>
        <button type="submit" name="action" (click)="makeLogin()" class="btn btn-block btn-hero-success"> Entrar </button>
    </div>
</div>

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';
import { Usuario } from './usuario';
import { User } from "./user";

@Component({
   selector: 'ngx-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.scss'],
})
export class LoginComponent implements OnInit {

   _user: User = new User();
   constructor(private _authService: AuthService) { }

   ngOnInit() {
       this.logout();
   }

   logout() {
       this._authService.userNoAuthenticated();
   }

   makeLogin() {
       this._authService.getUser(this._user);
   }
}

1 Resposta 1

1

O Angular tem um validador muito bom, o Validators. Segue um exemplo de como implementá-lo:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { patternValidator } from 'app/shared/pattern-validator';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  loginForm: FormGroup;

  ngOnInit() {
    this.createForm();
  }

  private createForm() {
    this.loginForm = new FormGroup({
      // tslint:disable-next-line
      email: new FormControl('', [Validators.required, patternValidator(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)]),
      password: new FormControl('', Validators.required),
    });
  }

  public login() {
    console.log(this.loginForm.value);
  }

}

Para criar o patternValidator:

import { AbstractControl, ValidatorFn, FormGroup } from '@angular/forms';

export function patternValidator(regexp: RegExp): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    const value = control.value;
    if (value === '') {
      return null;
    }
    return !regexp.test(value) ? { 'patternInvalid': { regexp } } : null;
  };
}

Insira uma tag form com o formGroup envolvendo seu formulário: . E seu input deve conter formControlName e mdInput: .

Segue um exemplo:

<md-card>
  <md-card-title>Connection</md-card-title>
  <md-card-content>
    <form [formGroup]="loginForm">
      <md-input-container [ngClass]="{'error': loginForm.controls['email'].errors && !loginForm.controls['email'].pristine}" dividerColor="{{loginForm.controls['email'].errors && !loginForm.controls['email'].pristine ? 'warn' : 'primary'}}">
        <input type="email" mdInput formControlName="email" placeholder="Email" required>
        <div *ngIf="loginForm.controls['email'].errors && !loginForm.controls['email'].pristine" class="error-msg">
          <div [hidden]="!loginForm.controls['email'].errors.required">Email is required.</div>
          <div [hidden]="!loginForm.controls['email'].errors.patternInvalid">Email is invalid.</div>
        </div>
      </md-input-container>
      <md-input-container [ngClass]="{'error': loginForm.controls['password'].errors && !loginForm.controls['password'].pristine}"
        dividerColor="{{loginForm.controls['password'].errors && !loginForm.controls['password'].pristine ? 'warn' : 'primary'}}">
        <input type="password" mdInput formControlName="password" placeholder="Password" required>
        <div *ngIf="loginForm.controls['password'].errors && !loginForm.controls['password'].pristine" class="error-msg">
          <div [hidden]="!loginForm.controls['password'].errors.required">Password is required.</div>
        </div>
      </md-input-container>
    </form>
  </md-card-content>
  <md-card-actions align="end">
    <button md-raised-button class="btn" [disabled]="loginForm.invalid" (click)="login()">Login</button>
  </md-card-actions>
</md-card>

Segui este exemplo e deu certo, usei no Ionic 3. Mudei apenas o necessário para adaptar ao meu problema. Este é o link do artigo, espero que ajude.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .