Проверка динамической формы на основе модели Angular2

Пожалуйста, обратитесь к моему plunkr

Я играл с новым Angular 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));

Используя метод, который я изучил на сеансе 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;

Пожалуйста, посмотрите на мой планк и дайте мне знать, есть ли лучший способ обработки динамической проверки формы, управляемой моделью?


angular validation angular2-forms
person Eric Weiss    schedule 15.05.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Моя строка импорта выглядит так, и она не помечена как ошибка.

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

И немного информации о проблеме с формой сброса. Соответствующая функция сброса пока недоступна, но существует обходной путь. Я нашел его в документы.

Вам нужно поле компонента

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 и кажется, что оно работает.

person heathen    schedule 15.05.2016
comment
Я пробовал. Но у меня все еще есть проблема с отправкой формы в первый раз с установленным флажком IsEmployee. Затем после сброса формы вы получите сообщение об ошибке, когда снова установите флажок. То же самое было и с оригинальным плаком. - person Eric Weiss; 16.05.2016