diff --git a/README.md b/README.md
index fb3f163..6ac3f28 100644
--- a/README.md
+++ b/README.md
@@ -31,12 +31,8 @@ Let's just have a look at the following example:
-
- Field is required
-
-
- Min length is 5
-
+
Field is required
+
Min length is 5
Field must contain at least one uppercase, one lowercase, and one number
@@ -61,14 +57,10 @@ You decide how to display the messages by defining your own Error component:
-
diff --git a/demo-app/src/app/components/translated-form-error/translated-form-error.component.ts b/demo-app/src/app/components/translated-form-error/translated-form-error.component.ts
index 5b57b45..2574e6e 100644
--- a/demo-app/src/app/components/translated-form-error/translated-form-error.component.ts
+++ b/demo-app/src/app/components/translated-form-error/translated-form-error.component.ts
@@ -25,19 +25,18 @@ export class TranslatedFormErrorComponent implements NgxFormErrorComponent, OnIn
public checkForErrors(): void {
this.errors$.subscribe((errors: NgxFormFieldError[]) => {
- // the formField can be retrieved from the "fieldName" param of any of the errors
+ this.errors = errors;
+
if (errors.length) {
+ // the formField can be retrieved from the "fieldName" param of any of the errors
this.fieldName = errors[0].params.fieldName;
+ this.translateFieldName();
}
-
- this.errors = errors;
- this.translateFieldName();
});
}
public translateFieldName(): void {
for (const error of this.errors) {
- console.log("-------- translating error.params.fieldName", this.fieldName);
error.params = { ...error.params, fieldName: this.translateService.instant(this.fieldName) };
}
}
diff --git a/demo-app/src/app/pages/ngx-forms-example/ngx-forms-example.component.html b/demo-app/src/app/pages/ngx-forms-example/ngx-forms-example.component.html
index 3b810f1..d69acbf 100644
--- a/demo-app/src/app/pages/ngx-forms-example/ngx-forms-example.component.html
+++ b/demo-app/src/app/pages/ngx-forms-example/ngx-forms-example.component.html
@@ -31,43 +31,63 @@
+
+
-
+
Has errors: {{ usernameField.hasErrors }}
Has 'required' error: {{ usernameField.hasError("required") }}