1

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

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

4

1 回答 1

3

ng-invalid如果验证失败，角度验证器会设置css 类。但是你没有ng-invalid在你的 CSS 中定义，所以你没有得到红色边框。

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

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

不完全知道为什么密码的 minLength(5) 验证器允许空密码。无论是角度错误还是预期行为，您需要将其与所需的验证器结合使用。

于 2016-11-04T19:01:48.743 回答