У меня есть форма, состоящая из следующих элементов:
- Имя
- Фамилия
- 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;
}
Тем не менее, с этой текущей структурой форма активируется при загрузке страницы. Что нежелательно, поскольку нет значений для имени, фамилии, идентификатора пользователя, номера ссылки или тега актива. Я чувствую, что есть более чистый способ сделать это.