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

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 时它会启用提交按钮，然后如果我将名字留空，输入永远不会变为红色。

我做错了什么？

编辑：

我在这里创建了一个演示

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

Answer 1

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

如果您在 CSS 中定义样式，它会起作用：

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

不太清楚为什么密码的 minLength(5) 验证器允许空密码。这是一个 angular 错误或预期行为，您需要将其与所需的验证程序结合使用。

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

Model driven forms - Validators issue

typescript

angular2-forms

angular2-template

angular2-cli

angular