Как мне пройти проверку формы? - PullRequest
0 голосов
/ 29 июня 2018

У меня есть форма, состоящая из следующих элементов:

  • Имя
  • Фамилия
  • ID пользователя
  • Ссылочный номер
  • метка актива
  • с даты
  • На сегодняшний день

Я пытаюсь применить проверку к моей форме, чтобы форма enable нажимала кнопку отправки, когда выполняются следующие правила.

  • Всегда должна быть дата от даты и до даты.
  • Должно быть хотя бы одно из следующего
    • Фамилия и имя
    • идентификатор пользователя
    • Ссылочный номер
    • Тег актива

Я построил свою форму с formGroup примерно так:

this.searchForm = this.fb.group({
    criteria: this.fb.group({
        name: this.fb.group({
            firstName: [{ value: null, disabled: false }, [
                Validators.pattern(new RegExp('[A-Za-z]'))
            ]],
            lastName: [{ value: null, disabled: false }, [
                Validators.pattern(new RegExp('[A-Za-z]'))
            ]],
        }, { validator: atLeastOneName }),
        userId: [{ value: null, disabled: false }, [
            Validators.minLength(8),
            Validators.maxLength(8)
        ]],
        refNumber: [{ value: null, disabled: false }, [
            Validators.minLength(7),
            Validators.maxLength(7)
        ]],
        assetTag: [{ value: null, disabled: false }, [
            Validators.minLength(9),
            Validators.maxLength(9)
        ]],
    }, { validator: atLeastOne }),
    fromDate: [moment().subtract(30, 'days').format('MM/DD/YYYY'), [
        Validators.required
    ]],
    toDate: [moment().format('MM/DD/YYYY'), [
        Validators.required
    ]]
}, { validator: hasValidDates });

Мои валидаторы как таковые

export function atLeastOne(form: FormGroup): ValidationErrors {
    const message = {
        'search': {
            'message': 'At least one field should be entered for the search'
        }
    };

    let hasValues = false;

    Object.keys(form.value).map(k => {
        if (form.value[k] !== '' && form.value[k] !== null) { hasValues = true; }
    });

    console.log('hasValues: ', hasValues);

    return hasValues ? null : message;
}

export function atLeastOneName(form: FormGroup): ValidationErrors {
    const message = {
        'search': {
            'message': 'At least one name must be present for the search'
        }
    };

    let hasNames = false;

    let firstName = form.value['firstName'],
        lastName = form.value['lastName'];

    if (firstName && lastName) {
        hasNames = true;
    } else if (!firstName && !lastName) {
        hasNames = true;
    } else {
        hasNames = false;
    }

    console.log('hasNames: ', hasNames);

    return hasNames ? null : message;
}

export function hasValidDates(form: FormGroup): ValidationErrors {
    const message = {
        'search': {
            'message': 'Your input dates are invalid, please double check them.'
        }
    };

    let validDates = false;

    let fromDate = form.controls['fromDate'],
        toDate = form.controls['toDate'];

    if (new Date(fromDate.value) <= new Date(toDate.value)) {
        validDates = true;
    }

    let momentFromDate = moment(fromDate.value),
        momentToDate = moment(toDate.value);
    if (momentFromDate.diff(momentToDate, 'months') > 6) {
        validDates = false;
        message.search.message = 'Please restrict your input dates to less than a 6 month period.';
    }

    return validDates ? null : message;
}

Тем не менее, с этой текущей структурой форма активируется при загрузке страницы. Что нежелательно, поскольку нет значений для имени, фамилии, идентификатора пользователя, номера ссылки или тега актива. Я чувствую, что есть более чистый способ сделать это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...