Question

请参阅我的plunkr

我一直在玩新的Angular 2 RC，我想我已经弄清楚了表单验证的工作原理。

首先，我构建了两个名为defaultValidationMessages和formDefinition

的对象

private defaultValidationMessages: { [id: string]: string };

formDefinition: {
    [fieldname: string]:
    {
        displayName: string,
        placeholder: string,
        currentErrorMessage: string,
        customValidationMessages: { [errorKey: string]: string }
        defaultValidators: ValidatorFn,
        defaultValue: any
    }
};

然后我使用默认验证器和字段信息加载这些对象。并从formDefinition对象构建ControlGroup。

    this.defaultValidationMessages = {
        'required': '{displayName} is required',
        'minlength': '{displayName} must be at least {minlength} characters',
        'maxlength': '{displayName} cannot exceed {maxlength} characters',
        'pattern': '{displayName} is not valid'
    }

    this.formDefinition = {
        'name': {
            displayName: 'Name',
            placeholder: '',
            currentErrorMessage: '',
            customValidationMessages: {},
            defaultValidators: Validators.compose(
                [
                    Validators.required,
                    Validators.minLength(3),
                    Validators.maxLength(50)
                ]),
            defaultValue: this.person.name
        },
        'isEmployee': {
            displayName: 'Is Employee',
            placeholder: '',
            currentErrorMessage: '',
            customValidationMessages: {},
            defaultValidators: Validators.compose([]),
            defaultValue: this.person.isEmployee
        },
        'employeeId': {
            displayName: 'Employee Id',
            placeholder: '',
            currentErrorMessage: '',
            customValidationMessages: { 'pattern': '{displayName} must be 5 numerical digits' },
            defaultValidators: Validators.compose(
                [
                    Validators.pattern((/\d{5}/).source)
                ]),
            defaultValue: this.person.employeeId
        }
    }
    this.personForm = this.formBuilder.group({});
    for (var v in this.formDefinition) {
        this.personForm.addControl(v, new Control(this.formDefinition[v].defaultValue, this.formDefinition[v].defaultValidators));
    }

    this.personForm.valueChanges
        .map(value => {
            return value;
        })
        .subscribe(data => this.onValueChanged(data));

使用我从Deborah Kurata的ng-conf 2016会话中学到的技术，我将方法绑定到ControlGroups valueChanges事件。

通过在每个控件上定义默认验证器集，它允许控件根据将来的操作动态地为其添加新的验证器。然后在以后清除回默认验证器。

问题我还有。

我在使用我的打字稿intellisense来导入ValidatorFn类型时遇到了问题。我在这里找到了它，但我认为我不想这样访问它：

import { ValidatorFn } from '../../../node_modules/@angular/common/src/forms/directives/validators'

我还必须通过设置一些内部成员来重置表单。有没有更好的方法来重置表单？见下文：

(<any> this.programForm.controls[v])._touched = false;
(<any> this.programForm.controls[v])._dirty = false;
(<any> this.programForm.controls[v])._pristine = true;

请查看我的插件并告诉我是否有更好的方法来处理模型驱动的动态表单验证？

Answer 1

我的导入字符串如下所示，并未标记为错误。

import { ValidatorFn } from '@angular/common/src/forms/directives/validators';

有关重置表单问题的一些信息。目前还没有适当的重置功能，但存在一种解决方法。我在docs找到了它。

您需要一个组件字段

active: true;

您需要在表单标记中查看它：

<form *ngIf="active">

之后，您应该将personFormSubmit（）方法更改为：

personFormSubmit() {
  this.person = new Person();
  this.active = false;
  setTimeout(()=> {
    this.active=true;
    this.changeDetectorRef.detectChanges();
    alert("Form submitted and reset.");
  }, 0);
}

我试着用plnkr示例解决这个问题，看起来很有效。

Angular2模型驱动的动态表单验证

1 个答案: