Учитывая этот код:
this.form = this.formBuilder.group({
email: ['', [Validators.required, EmailValidator.isValid]],
hasAcceptedTerms: [false, Validators.pattern('true')]
});
Как я могу получить все ошибки проверки из this.form?
Я пишу модульные тесты и хочу включить фактические ошибки проверки в сообщении assert.
Я встретил ту же проблему и, чтобы найти все ошибки проверки и отобразить их, я написал следующий метод:
getFormValidationErrors() {
Object.keys(this.productForm.controls).forEach(key => {
const controlErrors: ValidationErrors = this.productForm.get(key).errors;
if (controlErrors != null) {
Object.keys(controlErrors).forEach(keyError => {
console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
});
}
});
}
Название формы productForm должно быть изменено на ваше.
Он работает следующим образом: мы получаем все наши элементы управления из формы в формате {[p: string]: AbstractControl} и повторяем каждый ключ ошибки, чтобы получить информацию об ошибке. Он пропускает значения null ошибки.
Его также можно изменить для отображения ошибок проверки в представлении шаблона, просто замените console.log(..) на то, что вам нужно.
Это решение с поддержкой FormGroup внутри ( например, здесь)
Протестировано: Угловое 4.3.6
получить форм-проверки-errors.ts
import { AbstractControl, FormGroup, ValidationErrors } from '@angular/forms';
export interface AllValidationErrors {
control_name: string;
error_name: string;
error_value: any;
}
export interface FormGroupControls {
[key: string]: AbstractControl;
}
export function getFormValidationErrors(controls: FormGroupControls): AllValidationErrors[] {
let errors: AllValidationErrors[] = [];
Object.keys(controls).forEach(key => {
const control = controls[ key ];
if (control instanceof FormGroup) {
errors = errors.concat(getFormValidationErrors(control.controls));
}
const controlErrors: ValidationErrors = controls[ key ].errors;
if (controlErrors !== null) {
Object.keys(controlErrors).forEach(keyError => {
errors.push({
control_name: key,
error_name: keyError,
error_value: controlErrors[ keyError ]
});
});
}
});
return errors;
}
Пример использования:
if (!this.formValid()) {
const error: AllValidationErrors = getFormValidationErrors(this.regForm.controls).shift();
if (error) {
let text;
switch (error.error_name) {
case 'required': text = '${error.control_name} is required!'; break;
case 'pattern': text = '${error.control_name} has wrong pattern!'; break;
case 'email': text = '${error.control_name} has wrong email format!'; break;
case 'minlength': text = '${error.control_name} has wrong length! Required length: ${error.error_value.requiredLength}'; break;
case 'areEqual': text = '${error.control_name} must be equal!'; break;
default: text = '${error.control_name}: ${error.error_name}: ${error.error_value}';
}
this.error = text;
}
return;
}
Или вы можете просто использовать эту библиотеку, чтобы получить все ошибки, даже из глубоких и динамических форм.
npm install --save npm i @naologic/forms
Тогда вы захотите
import {SuperForm} from 'npm я @naologic/forms';
Затем просто передайте FormGroup для извлечения всех ваших ошибок
const errorsFlat = SuperForm.getAllErrorsFlat(fg);
console.log(errorsFlat);
ОБНОВИТЬ:
Вы можете использовать npm я @naologic/forms и использовать NaoFromGroup вместо классической группы форм из угловой. Он имеет некоторые новые функции, а также вы можете получить все ошибки.
К сожалению, пока нет документов, просто посмотрите на код.
ОБНОВИТЬ:
lib требует углового 6, потому что он использует AbstractControlOptions
Это еще один вариант, который рекурсивно собирает ошибки и не зависит от какой-либо внешней библиотеки, такой как lodash (только ES6):
function isFormGroup(control: AbstractControl): control is FormGroup {
return !!(<FormGroup>control).controls;
}
function collectErrors(control: AbstractControl): any | null {
if (isFormGroup(control)) {
return Object.entries(control.controls)
.reduce(
(acc, [key, childControl]) => {
const childErrors = collectErrors(childControl);
if (childErrors) {
acc = {...acc, [key]: childErrors};
}
return acc;
},
null
);
} else {
return control.errors;
}
}
export class GenericValidator {
constructor(private validationMessages: { [key: string]: { [key: string]: string } }) {
}
processMessages(container: FormGroup): { [key: string]: string } {
const messages = {};
for (const controlKey in container.controls) {
if (container.controls.hasOwnProperty(controlKey)) {
const c = container.controls[controlKey];
if (c instanceof FormGroup) {
const childMessages = this.processMessages(c);
// handling formGroup errors messages
const formGroupErrors = {};
if (this.validationMessages[controlKey]) {
formGroupErrors[controlKey] = '';
if (c.errors) {
Object.keys(c.errors).map((messageKey) => {
if (this.validationMessages[controlKey][messageKey]) {
formGroupErrors[controlKey] += this.validationMessages[controlKey][messageKey] + ' ';
}
})
}
}
Object.assign(messages, childMessages, formGroupErrors);
} else {
// handling control fields errors messages
if (this.validationMessages[controlKey]) {
messages[controlKey] = '';
if ((c.dirty || c.touched) && c.errors) {
Object.keys(c.errors).map((messageKey) => {
if (this.validationMessages[controlKey][messageKey]) {
messages[controlKey] += this.validationMessages[controlKey][messageKey] + ' ';
}
})
}
}
}
}
}
return messages;
}
}
Я взял его у Деборека и немного изменил.
Попробуйте это, это вызовет проверку для всех элементов управления в форме:
validateAllFormControl(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
} else if (control instanceof FormGroup) {
this.validateAllFormControl(control);
}
});
}
Основываясь на ответе @MixerOID, вот мое окончательное решение в качестве компонента (возможно, я создаю библиотеку). Я также поддерживаю FormArray:
import {Component, ElementRef, Input, OnInit} from '@angular/core';
import {FormArray, FormGroup, ValidationErrors} from '@angular/forms';
import {TranslateService} from '@ngx-translate/core';
interface AllValidationErrors {
controlName: string;
errorName: string;
errorValue: any;
}
@Component({
selector: 'app-form-errors',
templateUrl: './form-errors.component.html',
styleUrls: ['./form-errors.component.scss']
})
export class FormErrorsComponent implements OnInit {
@Input() form: FormGroup;
@Input() formRef: ElementRef;
@Input() messages: Array<any>;
private errors: AllValidationErrors[];
constructor(
private translateService: TranslateService
) {
this.errors = [];
this.messages = [];
}
ngOnInit() {
this.form.valueChanges.subscribe(() => {
this.errors = [];
this.calculateErrors(this.form);
});
this.calculateErrors(this.form);
}
calculateErrors(form: FormGroup | FormArray) {
Object.keys(form.controls).forEach(field => {
const control = form.get(field);
if (control instanceof FormGroup || control instanceof FormArray) {
this.errors = this.errors.concat(this.calculateErrors(control));
return;
}
const controlErrors: ValidationErrors = control.errors;
if (controlErrors !== null) {
Object.keys(controlErrors).forEach(keyError => {
this.errors.push({
controlName: field,
errorName: keyError,
errorValue: controlErrors[keyError]
});
});
}
});
// This removes duplicates
this.errors = this.errors.filter((error, index, self) => self.findIndex(t => {
return t.controlName === error.controlName && t.errorName === error.errorName;
}) === index);
return this.errors;
}
getErrorMessage(error) {
switch (error.errorName) {
case 'required':
return this.translateService.instant('mustFill') + ' ' + this.messages[error.controlName];
default:
return 'unknown error ' + error.errorName;
}
}
}
И HTML:
<div *ngIf="formRef.submitted">
<div *ngFor="let error of errors" class="text-danger">
{{getErrorMessage(error)}}
</div>
</div>
Использование:
<app-form-errors [form]="languageForm"
[formRef]="formRef"
[messages]="{language: 'Language'}">
</app-form-errors>
Вы можете перебрать свойство this.form.errors.
// IF not populated correctly - you could get aggregated FormGroup errors object
let getErrors = (formGroup: FormGroup, errors: any = {}) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
errors[field] = control.errors;
} else if (control instanceof FormGroup) {
errors[field] = this.getErrors(control);
}
});
return errors;
}
// Calling it:
let formErrors = getErrors(this.form);
Я использую угловое 5, и вы можете просто проверить свойство статуса своей формы, используя FormGroup, например
this.form = new FormGroup({
firstName: new FormControl('', [Validators.required, validateName]),
lastName: new FormControl('', [Validators.required, validateName]),
email: new FormControl('', [Validators.required, validateEmail]),
dob: new FormControl('', [Validators.required, validateDate])
});
this.form.status будет "INVALID", если все поля не пройдут все правила проверки.
Лучшая часть - то, что он обнаруживает изменения в реальном времени.
Для большого дерева FormGroup вы можете использовать lodash для очистки дерева и получения дерева только элементов управления с ошибками. Это делается путем повторения через дочерние элементы управления (например, с использованием allErrors(formGroup)) и сокращения любых полностью допустимых подгрупп элементов управления:
private isFormGroup(control: AbstractControl): control is FormGroup {
return !!(<FormGroup>control).controls;
}
// Returns a tree of any errors in control and children of control
allErrors(control: AbstractControl): any {
if (this.isFormGroup(control)) {
const childErrors = _.mapValues(control.controls, (childControl) => {
return this.allErrors(childControl);
});
const pruned = _.omitBy(childErrors, _.isEmpty);
return _.isEmpty(pruned) ? null : pruned;
} else {
return control.errors;
}
}