stackoverflow.com/questions/43383341/...
отаю над созданием группы вложенных форм, как показано вhttps://plnkr.co/edit/c93yFe2r83cvjiRvl6Uj?p=preview.
Это пример изhttps://angular.io/docs/ts/latest/cookbook/form-validation.html#!#reactive
Пример в Angular показывает использованиеvalidationMessages
когда форма не имеет никаких гнездовых групп. Я не уверен, как расширить это, когда у меня есть вложенные группы форм. Ниже приведены образцы форм и проверочные сообщения, которые я бы создал.
buildForm(): void {
this.heroForm = this.fb.group({
'name': [this.hero.name, [
Validators.required,
Validators.minLength(4),
Validators.maxLength(24),
forbiddenNameValidator(/bob/i)
]
],
'address': this.fb.group({
'city': [''],
'state': ['']
}),
'alterEgo': [this.hero.alterEgo],
'power': [this.hero.power, Validators.required]
});
this.heroForm.valueChanges
.subscribe(data => this.onValueChanged(data));
this.onValueChanged(); // (re)set validation messages now
}
ожидаемыйformErrors
а такжеvalidationMessages
formErrors = {
'name': '',
'power': '',
'address': {
'state': '',
'city': ''
}
};
validationMessages = {
'name': {
'required': 'Name is required.',
'minlength': 'Name must be at least 4 characters long.',
'maxlength': 'Name cannot be more than 24 characters long.',
'forbiddenName': 'Someone named "Bob" cannot be a hero.'
},
'power': {
'required': 'Power is required.'
},
'address': {
'city': {
'required': 'City is required.',
'minlength': 'City must be at least 4 characters long.',
},
'state': {
'required': 'State is required.',
'minlength': 'State must be at least 4 characters long.',
}
}
};
Ниже приводитсяonValueChanged
onValueChanged(data?: any) {
if (!this.heroForm) { return; }
const form = this.heroForm;
for (const field in this.formErrors) {
// clear previous error message (if any)
this.formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const messages = this.validationMessages[field];
for (const key in control.errors) {
this.formErrors[field] += messages[key] + ' ';
}
}
}
}
Как мне обновить вышеonValueChanged
функция для поддержки проверки вложенных групп форм?
Я делаю выше, потому что у меня есть форма мастера, и я хочу проверить группу вложенных форм, прежде чем перейти к следующему шагу в мастере. Каждый шаг мастера содержит вложенную группу форм. Текущий шаг мастера должен быть действителен перед переходом к следующему. Я не хочу помещать содержимое мастера в несколько компонентов, потому что все данные из мастера должны быть переданы вместе в конце удаленной службе. Так что я не вижу смысла в сложном наличии нескольких компонентов.