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时它会启用提交按钮，那么如果我将firstname设置为空白，则输入永远不会变为红色。

我做错了什么？

编辑：

我在这里创建了一个演示

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

Answer 1

如果验证失败，则角度验证器设置ng-invalid css类。但是，您尚未在CSS中定义ng-invalid，因此您没有获得红色边框。

如果你在CSS中定义它的风格：

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

不清楚为什么密码的minLength（5）验证器允许空密码。无论是角度错误还是预期行为，您都需要将其与所需的验证器相结合。

模型驱动形式 - 验证者问题

1 个答案: