Angular Form Validation 无法正常工作

我是 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 个字符)，我的密码没有任何错误。但如果我的用户名错误，那么密码也会给出正确的错误。我无法理解这种行为，因为我的用户名和密码都不是 inter-related 所以为什么一个人影响其他人。