Question

我正在通过表单构建器使用一些表单验证器在Angular 2中创建表单。

每当我在文本框中输入数据时 - 它都会通过（div轮廓的颜色变为绿色）。

当我使用数据加载表单时，文本框会有一个红色轮廓 - 即使它们填充了文本。

HTML：

    <div class="form-group row" [ngClass]="{'has-error': (!firstname.valid), 'has-success': (firstname.valid)}">
        <label for="firstname" class="col-sm-2 control-label">First Name</label>
        <div class="col-sm-10">
            <input [formControl]="firstname" type="text" class="form-control" id="firstname" placeholder="First Name" value="{{profile.firstname}}">
        </div>
    </div>

在组件文件中：

@Input() profile: Profile;

public form: FormGroup;
public firstname: AbstractControl;
public lastname: AbstractControl;


    constructor(fb: FormBuilder) {
    this.form = fb.group({
        'firstname': ['', Validators.compose([Validators.required, Validators.minLength(4)])],
        'lastname': ['', Validators.compose([Validators.required, Validators.minLength(4)])],
        'jobtitle': ['', Validators.compose([Validators.required, Validators.minLength(4)])],
        'department': ['', Validators.compose([Validators.required, Validators.minLength(4)])]
    });

    this.firstname = this.form.controls['firstname'];
    this.lastname = this.form.controls['lastname'];
    this.jobtitle = this.form.controls['jobtitle'];
    this.department = this.form.controls['department'];
}

为什么验证没有通过，Validators.required不正确？

感谢。

Answer 1

我看到你正在使用模型驱动的表单，为什么不使用模型驱动的方式设置初始值：

'firstname': [profile.firstname, Validators.compose([Validators.required, Validators.minLength(4)])]

如果您在初始阶段没有掌握数据，并且确实需要稍后更新，请使用：

this.firstname.updateValue(this.profile.firstname);

工作plnkr：http://plnkr.co/edit/UgsYOu04H0Y4kxGYwhAl?p=preview

形式验证器不通过Angular 2

1 个答案: