模型驱动的表单-验证器问题

Question

我正在测试一个简单的应用程序。这些是我的档案：

home.component.ts

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

@Component({
    selector: 'app-home',
    templateUrl: 'home.component.html'
})
export class HomeComponent {
    form: FormGroup;

    constructor(fb: FormBuilder) {
        this.form = new FormGroup({
            'firstName': new FormControl('', Validators.required),
            'password': new FormControl('', Validators.minLength(5))
        });
    }
    onSubmit() {
        console.log('model-based form submitted');
        console.log(this.form);
    }
}

这是模板文件：

<section class="sample-app-content">
    <h1>Model-based Form Example:</h1>
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <div class="form-field">
            <label>First Name:</label>
            <input type="text" formControlName="firstName">
        </div>
   <div class="form-field">
        <label>Password:</label>
        <input type="text" formControlName="password">
   </div>
    <p>
        <button type="submit" [disabled]="!form.valid">Submit</button>
    </p>
</form>

​

但是它没有很好地识别Validators，因为当我编写firstname时，它启用了submit按钮，然后如果我将名字放在空白中，输入就不会更改为红色。

我做错了什么？

编辑：

我在这里创建了一个演示

http://plnkr.co/edit/cs6N0n?p=preview

Answer 1

如果验证失败，角验证器将设置ng-invalid css类。但是，您还没有在CSS中定义ng-invalid，所以没有红色边框。

如果在CSS中定义样式，它可以工作：

.ng-invalid {
  border-color: #ff0000;
}

不知道为什么密码的minLength(5)验证器允许空密码。它要么是一个角度错误，要么是预期的行为，您需要将它与所需的验证器结合起来。