Я использую [(ngModel)] для отображения сообщений, если проверка с использованием шаблона не соответствует, я не могу отобразить сообщение об ошибке. Существует две проверки: одна для поля, как требуется, и другая для ошибки шаблона.отображается одна ошибка, которая является обязательной, а другая не отображается, если шаблон неправильный.Заранее благодарим вас, ребята, за то, что поделились своими знаниями.
// login.html
<div class="app-body">
<main class="main d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="card-group">
<div class="card p-4">
<div class="card-body">
<!-- <form (ngSubmit)="onSubmit(f.value)" #f=ngForm> -->
<form #form="ngForm">
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<div class="input-group mb-3" [ngClass]="{'has-error': (!username.valid && username.touched), 'has-success': (username.valid && username.touched)}">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-user"></i></span>
</div>
<input type="email" class="form-control" [(ngModel)]="user.username" placeholder="Username"
autocomplete="username" ngModel #username="ngModel" name="username" required>
<div *ngIf="username.errors?.required && (username.dirty || username.touched)" class="help-block" style="color: #813838">
Email is required!
<div *ngIf="username.errors?.pattern" class="help-block" style="color: #813838">
pattern is required!
</div>
</div>
</div>
<div class="input-group mb-4" [ngClass]="{'has-error': (!password.valid && password.touched), 'has-success': (password.valid && password.touched)}">
<div class="input-group-prepend">
<span class="input-group-text"><i class="icon-lock"></i></span>
</div>
<input type="password" [(ngModel)]="user.password" class="form-control" placeholder="Password"
autocomplete="current-password" #password="ngModel" ngModel name="password" required>
<div *ngIf="password.invalid && (password.dirty || password.touched)" class="help-block" style="color: #813838">
Password is required!
</div>
</div>
<div class="row">
<div class="col-6">
<button type="submit" [disabled]="!form.valid" class="btn btn-primary px-4" (click)="onSubmit()">Login</button>
</div>
<div class="col-6 text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
</div>
</div>
</form>
</div>
</div>
<div class="card text-white bg-primary py-5 d-md-down-none" style="width:44%">
<div class="card-body text-center">
<div>
<h2>Sign up</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<button type="button" class="btn btn-primary active mt-3">Register Now!</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
// login.ts
import { Component, OnInit } from '@angular/core';
import { NgForm, FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { getLocaleTimeFormat } from '@angular/common';
import { Router } from '@angular/router';
@Component({
selector: 'app-dashboard',
templateUrl: 'login.component.html'
})
export class LoginComponent implements OnInit {
// regexEmail = /^(([^<>()\[\]\\.,;:\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,}))$/;
regexEmail = /^(([^<>()\[\]\\.,;:\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,}))$/;
user: any = {};
pass: any = {};
form: FormGroup;
constructor(private router: Router, private formBuilder: FormBuilder
) {
}
ngOnInit() {
this.form = new FormGroup({
'username': new FormControl("", [Validators.required, Validators.pattern(this.regexEmail)]),
'password': new FormControl("", [Validators.required])
});
}
onSubmit() {
console.log(this.user.username);
console.log(this.form.value);
this.user = this.form.value.username !== null ? this.user = this.loginForm.value.username : this.user = "";
this.pass = this.form.value.password !== null ? this.pass = this.loginForm.value.password : this.pass = "";
if (this.user === localStorage.getItem('username') && this.pass === localStorage.getItem('password')) {
this.router.navigate(['/dashboard']);
alert("LOG IN SUCCESS!");
}
else {
this.onValidate();
alert("Username and Password did not match!");
this.loginForm.reset();
// this.onValidate()
}
}
}