Angular2 Model Driven Dynamic Form Validation

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 
    } 
}; 

Тогда я загрузить эти объекты с валидаторов по умолчанию и полевой информации. и создайте ControlGroup из объекта formDefinition.

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)); 

Используя методику, что я узнал от нг-конф 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, и кажется, что он работает.