Angular2模型驅動的動態表單驗證

Question

請參考我plunkr

我一直在用新的角度2 RC玩弄，我想我已經找到了表單驗證是如何工作的。

首先，我建立2個對象叫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)); 

使用的技術，我從德博拉倉田的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; 

請看看我的plunk，讓我知道是否有更好的方式來處理模型驅動的動態表單驗證？

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例子解決這個問題，看起來很有效。