Question

我是Angular的新手。我正在尝试在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() {
    }

}

问题是我的名字和姓氏验证完全正常。但是其他人有两个问题：

电子邮件（或用户名，密码）无效后，我会收到验证错误，但是即使我更正，该错误消息也不会消失。意思是说我第一次输入无效的电子邮件，它显示错误消息。然后，当我输入正确的代码时（使用日志语句进行调试时，它表明错误已消失），但错误消息仍然可见。
如果我正确填写用户名（平均长度为4+），然后输入错误的密码长度（仅输入2个字符），则密码不会出现任何错误。但是，如果我输入的用户名错误，那么密码也会给出正确的错误。我无法理解这种行为，因为我的用户名和密码都不相互关联，所以为什么一个人会影响另一个人。

角形式验证不能始终如一地工作

0 个答案: