Проверка угловых форм не работает последовательно - PullRequest
Новая
       9

Проверка угловых форм не работает последовательно

0 голосов
/ 19 сентября 2018

Я новичок в Angular.Я пытаюсь реализовать простую проверку формы в угловых реактивных формах.Вот мой HTML-шаблон: 

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <form autocomplete="off" class="form-horizontal" 
                [formGroup]="registration">
                <h2>Registration Form</h2>

                <div class="form-group">
                    <div class="col-sm-9">                          
                        <input type="text" name="firstName"
                        formControlName="firstName"
                        placeholder="First Name" class="form-control" />
                        <!-- <label class="validation-message"></label> -->
                        <label *ngIf="firstName.touched && firstName.invalid">Firstname is required</label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-9">                          
                        <input type="text" name="lastName"
                        formControlName="lastName"
                        placeholder="Last Name" class="form-control" />
                        <label *ngIf="lastName.touched && lastName.invalid">Lastname is required</label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-9">
                        <input type="text" name="email" 
                        formControlName="email"
                        placeholder="Email" class="form-control" />
                        <label *ngIf="email.touched && email.errors.required">Email is required</label>
                        <label *ngIf="email.touched && email.errors.pattern">Email is not valid</label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-9">
                        <input type="text" name="username" 
                        formControlName="username"
                        placeholder="Username" class="form-control" />
                        <label *ngIf="username.touched && username.errors.required">Username is required</label>
                        <label *ngIf="username.touched && username.errors.minlength">Username should be minimum 4 characters long.</label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-9">
                        <input type="password" name="password" 
                        formControlName="password"
                        placeholder="Password" class="form-control" />
                        <label *ngIf="password.touched && password.errors.required">Password is required</label>
                        <label *ngIf="password.touched && ( password.errors.minlength || password.errors.maxlength )">Password should be 4 to 10 characters long.</label>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-9">
                        <button type="submit" class="btn btn-primary btn-block">Register User</button>
                    </div>
                </div>


            </form>
            <div class="col-sm-9 goToButton">
                <button class="btn btn-md btn-warning btn-block" [routerLink]="['/login']" type="Submit">Go To Login Page</button>
            </div>
        </div>
    </div>

</div>

И это мой компонент машинописи: 

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

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

    constructor() { }

    registration = new FormGroup({
        firstName: new FormControl('', Validators.required),
        lastName: new FormControl('', Validators.required),
        email: new FormControl('', [Validators.required, Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")]),
        username: new FormControl('', Validators.minLength(4)),
        password: new FormControl('', [Validators.required, Validators.minLength(4), Validators.maxLength(10)])
    });

    get firstName() { return this.registration.get('firstName'); }
    get lastName() { return this.registration.get('lastName'); }
    get email() { return this.registration.get('email'); }
    get username() { return this.registration.get('username'); }
    get password() { return this.registration.get('password'); }

    ngOnInit() {
    }

}

Проблема в том, что мои проверки имени и фамилии работают совершенно нормально.Но у других есть 2 проблемы:

  1. После того, как электронная почта (или имя пользователя, пароль) признана недействительной, я получаю ошибку проверки, но после этого, даже если я ее исправлю, сообщение об ошибке не исчезнет.Означает, что при первом вводе недопустимого адреса электронной почты отображается сообщение об ошибке.Затем, когда я ввожу правильное (при отладке с использованием операторов журнала это показывает, что ошибка исчезла), но сообщение об ошибке все еще отображается.
  2. Если я правильно заполнил имя пользователя (означает, что длина 4+), а затемЯ ввел неправильную длину пароля (скажем, только 2 символа), я не получаю никакой ошибки в пароле.Но если у меня неправильное имя пользователя, в этом случае пароль также дает правильную ошибку.Я не могу понять это поведение, потому что и мое имя пользователя, и пароль не связаны между собой, поэтому почему одно влияет на другое.
...