diff --git a/demo-app/ng12/angular.json b/demo-app/ng12/angular.json index 974f1ca..22ebdd4 100644 --- a/demo-app/ng12/angular.json +++ b/demo-app/ng12/angular.json @@ -22,18 +22,10 @@ "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", - "assets": [ - "src/favicon.ico", - "src/assets" - ], - "styles": [ - "node_modules/normalize.css/normalize.css", - "src/styles/styles.scss" - ], + "assets": ["src/favicon.ico", "src/assets"], + "styles": ["node_modules/normalize.css/normalize.css", "src/styles/styles.scss"], "stylePreprocessorOptions": { - "includePaths": [ - "src/styles" - ] + "includePaths": ["src/styles"] }, "scripts": [], "vendorChunk": true, @@ -100,29 +92,18 @@ "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", - "styles": [ - "node_modules/normalize.css/normalize.css", - "src/styles/styles.scss" - ], + "styles": ["node_modules/normalize.css/normalize.css", "src/styles/styles.scss"], "stylePreprocessorOptions": { - "includePaths": [ - "src/styles" - ] + "includePaths": ["src/styles"] }, "scripts": [], - "assets": [ - "src/favicon.ico", - "src/assets" - ] + "assets": ["src/favicon.ico", "src/assets"] } }, "lint": { "builder": "@angular-eslint/builder:lint", "options": { - "lintFilePatterns": [ - "src/**/*.ts", - "src/**/*.html" - ] + "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] } }, "e2e": { diff --git a/demo-app/ng12/src/app/app.component.spec.ts b/demo-app/ng12/src/app/app.component.spec.ts index c2ffbc9..daeee35 100644 --- a/demo-app/ng12/src/app/app.component.spec.ts +++ b/demo-app/ng12/src/app/app.component.spec.ts @@ -1,41 +1,37 @@ -import { ComponentFixture, TestBed, waitForAsync} from "@angular/core/testing"; +import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; import { AppComponent } from "./app.component"; import { RouterTestingModule } from "@angular/router/testing"; import { NO_ERRORS_SCHEMA } from "@angular/core"; describe("AppComponent", () => { - let fixture: ComponentFixture; - let component: AppComponent; + let fixture: ComponentFixture; + let component: AppComponent; - beforeEach(waitForAsync(() => { - return TestBed.configureTestingModule({ - imports: [ - RouterTestingModule - ], - declarations: [ - AppComponent - ], - schemas: [ NO_ERRORS_SCHEMA ] - }).compileComponents(); - })); + beforeEach(waitForAsync(() => { + return TestBed.configureTestingModule({ + imports: [RouterTestingModule], + declarations: [AppComponent], + schemas: [NO_ERRORS_SCHEMA] + }).compileComponents(); + })); - beforeEach(() => { - fixture = TestBed.createComponent(AppComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(AppComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it("should create the app", () => { - expect(fixture).toBeDefined(); - expect(component).toBeDefined(); - }); + it("should create the app", () => { + expect(fixture).toBeDefined(); + expect(component).toBeDefined(); + }); - it("should render title in a h1 tag", () => { - fixture.detectChanges(); - const compiled: HTMLElement = fixture.debugElement.nativeElement; - const h1Element = compiled.querySelector("h1"); - expect(h1Element).toBeTruthy(); - // tslint:disable-next-line:no-non-null-assertion - expect(h1Element!.textContent).toContain("Ngx-Form-Errors"); - }); + it("should render title in a h1 tag", () => { + fixture.detectChanges(); + const compiled: HTMLElement = fixture.debugElement.nativeElement; + const h1Element = compiled.querySelector("h1"); + expect(h1Element).toBeTruthy(); + // tslint:disable-next-line:no-non-null-assertion + expect(h1Element!.textContent).toContain("Ngx-Form-Errors"); + }); }); diff --git a/demo-app/ng12/src/app/app.module.ts b/demo-app/ng12/src/app/app.module.ts index 563365a..bfae69d 100644 --- a/demo-app/ng12/src/app/app.module.ts +++ b/demo-app/ng12/src/app/app.module.ts @@ -39,28 +39,28 @@ import { NgxFormsExampleComponent, ReactiveFormsExampleComponent, TemplateDriven NavigationComponent, CardComponent ], - imports: [ - BrowserModule, - BrowserAnimationsModule, - AppRoutingModule, - FormsModule, - HttpClientModule, - MatButtonModule, - MatButtonToggleModule, - MatCardModule, - MatFormFieldModule, - MatGridListModule, - MatInputModule, - MatToolbarModule, - MatListModule, - MatSidenavModule, - MatIconModule, - ReactiveFormsModule, - TranslateModule.forRoot(), - NgxFormErrorsModule.forRoot({ - formErrorComponent: TranslatedFormErrorComponent - }) - ], + imports: [ + BrowserModule, + BrowserAnimationsModule, + AppRoutingModule, + FormsModule, + HttpClientModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatFormFieldModule, + MatGridListModule, + MatInputModule, + MatToolbarModule, + MatListModule, + MatSidenavModule, + MatIconModule, + ReactiveFormsModule, + TranslateModule.forRoot(), + NgxFormErrorsModule.forRoot({ + formErrorComponent: TranslatedFormErrorComponent + }) + ], exports: [LanguageSelectorComponent], providers: [], entryComponents: [SimpleFormErrorComponent, TranslatedFormErrorComponent], diff --git a/demo-app/ng12/src/app/components/card/card.component.ts b/demo-app/ng12/src/app/components/card/card.component.ts index 228b209..b5091e5 100644 --- a/demo-app/ng12/src/app/components/card/card.component.ts +++ b/demo-app/ng12/src/app/components/card/card.component.ts @@ -39,5 +39,4 @@ export class CardComponent { break; } } - } diff --git a/demo-app/ng12/src/app/components/card/card.theme.scss b/demo-app/ng12/src/app/components/card/card.theme.scss index ade2e7c..183b662 100644 --- a/demo-app/ng12/src/app/components/card/card.theme.scss +++ b/demo-app/ng12/src/app/components/card/card.theme.scss @@ -1,4 +1,4 @@ -@use '~@angular/material' as mat; +@use "~@angular/material" as mat; @mixin card-theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); diff --git a/demo-app/ng12/src/app/components/language-selector/language-selector.theme.scss b/demo-app/ng12/src/app/components/language-selector/language-selector.theme.scss index dec85fe..7ee9205 100644 --- a/demo-app/ng12/src/app/components/language-selector/language-selector.theme.scss +++ b/demo-app/ng12/src/app/components/language-selector/language-selector.theme.scss @@ -1,4 +1,4 @@ -@use '~@angular/material' as mat; +@use "~@angular/material" as mat; @mixin language-selector-theme($theme) { $primary: map-get($theme, primary); diff --git a/demo-app/ng12/src/app/components/navigation/navigation.component.ts b/demo-app/ng12/src/app/components/navigation/navigation.component.ts index 26f65f7..182f203 100644 --- a/demo-app/ng12/src/app/components/navigation/navigation.component.ts +++ b/demo-app/ng12/src/app/components/navigation/navigation.component.ts @@ -10,5 +10,4 @@ const componentName = "navigation"; export class NavigationComponent { @HostBinding("class") public cssClass: string = componentName; - } diff --git a/demo-app/ng12/src/app/components/navigation/navigation.theme.scss b/demo-app/ng12/src/app/components/navigation/navigation.theme.scss index 1c0334d..2c37122 100644 --- a/demo-app/ng12/src/app/components/navigation/navigation.theme.scss +++ b/demo-app/ng12/src/app/components/navigation/navigation.theme.scss @@ -1,4 +1,4 @@ -@use '~@angular/material' as mat; +@use "~@angular/material" as mat; @mixin app-navigation-theme($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); diff --git a/demo-app/ng12/src/app/pages/reactive-forms-example/reactive-forms-example.component.html b/demo-app/ng12/src/app/pages/reactive-forms-example/reactive-forms-example.component.html index c3ca6b1..a0fa0f7 100644 --- a/demo-app/ng12/src/app/pages/reactive-forms-example/reactive-forms-example.component.html +++ b/demo-app/ng12/src/app/pages/reactive-forms-example/reactive-forms-example.component.html @@ -1,201 +1,199 @@
-
Reactive Forms (Model Driven Forms)
+
Reactive Forms (Model Driven Forms)
-
-
- - - - - -
+
+ + + + + +
- {{ validation.message | translate }} -
-
-
+ > + {{ validation.message | translate }} +
+ + -
- - - -
+ + + +
- {{ validation.message | translate }} -
-
-
+ > + {{ validation.message | translate }} +
+
+
- - - -
+ + +
- {{ validation.message | translate }} -
-
- -
- + > + {{ validation.message | translate }} +
+ + +
+
- - - - - - -
+ + + + + + + - - - Username - -
Has errors: {{ !!formGroup.get("username")!.errors }}
-
Has 'required' error: {{ formGroup.get("username")!.hasError("required") }}
-
- 'required' error: -
{{ formGroup.get("username")!.getError("required") | json }}
-
-
Is touched? {{ formGroup.get("username")!.touched }}
-
- Errors: -
{{ formGroup.get("username")!.errors | json }}
-
-
-
+ + + Username + +
Has errors: {{ !!formGroup.get("username")!.errors }}
+
Has 'required' error: {{ formGroup.get("username")!.hasError("required") }}
+
+ 'required' error: +
{{ formGroup.get("username")!.getError("required") | json }}
+
+
Is touched? {{ formGroup.get("username")!.touched }}
+
+ Errors: +
{{ formGroup.get("username")!.errors | json }}
+
+
+
- - Password - -
Has errors: {{ !!formGroup.get("matchingPasswords.password")!.errors }}
-
Has 'pattern' error: {{ formGroup.get("matchingPasswords.password")!.hasError("pattern") }}
-
Is touched? {{ formGroup.get("matchingPasswords.password")!.touched }}
-
- 'pattern' error: -
{{ formGroup.get("matchingPasswords.password")!.getError("pattern") | json }}
-
-
- Errors: -
{{ formGroup.get("matchingPasswords.password")!.errors | json }}
-
-
-
+ + Password + +
Has errors: {{ !!formGroup.get("matchingPasswords.password")!.errors }}
+
Has 'pattern' error: {{ formGroup.get("matchingPasswords.password")!.hasError("pattern") }}
+
Is touched? {{ formGroup.get("matchingPasswords.password")!.touched }}
+
+ 'pattern' error: +
{{ formGroup.get("matchingPasswords.password")!.getError("pattern") | json }}
+
+
+ Errors: +
{{ formGroup.get("matchingPasswords.password")!.errors | json }}
+
+
+
- - Confirm password - -
Has errors: {{ !!formGroup.get("matchingPasswords.confirmPassword")!.errors }}
-
Has 'required' error: {{ formGroup.get("matchingPasswords.confirmPassword")!.hasError("required") }}
-
Is touched? {{ formGroup.get("matchingPasswords.confirmPassword")!.touched }}
-
- 'required' error: -
{{ formGroup.get("matchingPasswords.confirmPassword")!.getError("required") | json }}
-
-
- Errors: -
{{ formGroup.get("matchingPasswords.confirmPassword")!.errors | json }}
-
-
-
-
+ + Confirm password + +
Has errors: {{ !!formGroup.get("matchingPasswords.confirmPassword")!.errors }}
+
Has 'required' error: {{ formGroup.get("matchingPasswords.confirmPassword")!.hasError("required") }}
+
Is touched? {{ formGroup.get("matchingPasswords.confirmPassword")!.touched }}
+
+ 'required' error: +
{{ formGroup.get("matchingPasswords.confirmPassword")!.getError("required") | json }}
+
+
+ Errors: +
{{ formGroup.get("matchingPasswords.confirmPassword")!.errors | json }}
+
+
+
+
- -

- No validation errors -

-
    - - -
  • - {{ validation.message | translate }} -
  • -
    -
    - - -
  • + +
  • + {{ validation.message | translate }} +
  • +
    +
    + + +
  • - {{ validation.message | translate }} -
  • -
    -
    - - -
  • + +
  • - {{ validation.message | translate }} -
  • -
    -
    -
-
-
-
+ > + {{ validation.message | translate }} + + + + + +
+ diff --git a/demo-app/ng12/src/app/parent-error-state-matcher.ts b/demo-app/ng12/src/app/parent-error-state-matcher.ts index de1ba9f..784cf91 100644 --- a/demo-app/ng12/src/app/parent-error-state-matcher.ts +++ b/demo-app/ng12/src/app/parent-error-state-matcher.ts @@ -1,6 +1,5 @@ - import { FormControl, FormGroupDirective, NgForm } from "@angular/forms"; -import {ErrorStateMatcher} from "@angular/material/core"; +import { ErrorStateMatcher } from "@angular/material/core"; /** Error when invalid control is dirty, touched, or submitted. */ export class ParentErrorStateMatcher implements ErrorStateMatcher { diff --git a/demo-app/ng12/src/app/password-validator.ts b/demo-app/ng12/src/app/password-validator.ts index a02d36c..f48155d 100644 --- a/demo-app/ng12/src/app/password-validator.ts +++ b/demo-app/ng12/src/app/password-validator.ts @@ -6,7 +6,7 @@ export class PasswordValidator { let value: string | undefined; let valid = true; for (const key in formGroup.controls) { - /* eslint-disable-next-line no-prototype-builtins */ + /* eslint-disable-next-line no-prototype-builtins */ if (formGroup.controls.hasOwnProperty(key)) { const control: FormControl = formGroup.controls[key]; diff --git a/demo-app/ng13/src/app/app.component.spec.ts b/demo-app/ng13/src/app/app.component.spec.ts index 03e6c3c..167312c 100644 --- a/demo-app/ng13/src/app/app.component.spec.ts +++ b/demo-app/ng13/src/app/app.component.spec.ts @@ -1,4 +1,4 @@ -import { ComponentFixture, TestBed, waitForAsync} from "@angular/core/testing"; +import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; import { AppComponent } from "./app.component"; import { NO_ERRORS_SCHEMA } from "@angular/core"; import { RouterTestingModule } from "@angular/router/testing"; @@ -6,17 +6,13 @@ import { RouterTestingModule } from "@angular/router/testing"; describe("AppComponent", () => { let fixture: ComponentFixture; - beforeEach(waitForAsync(() => { - return TestBed.configureTestingModule({ - imports: [ - RouterTestingModule - ], - declarations: [ - AppComponent - ], - schemas: [ NO_ERRORS_SCHEMA ] - }).compileComponents(); - })); + beforeEach(waitForAsync(() => { + return TestBed.configureTestingModule({ + imports: [RouterTestingModule], + declarations: [AppComponent], + schemas: [NO_ERRORS_SCHEMA] + }).compileComponents(); + })); beforeEach(() => { fixture = TestBed.createComponent(AppComponent); diff --git a/demo-app/ng13/src/app/pages/reactive-forms-example/reactive-forms-example.component.html b/demo-app/ng13/src/app/pages/reactive-forms-example/reactive-forms-example.component.html index c3ca6b1..a0fa0f7 100644 --- a/demo-app/ng13/src/app/pages/reactive-forms-example/reactive-forms-example.component.html +++ b/demo-app/ng13/src/app/pages/reactive-forms-example/reactive-forms-example.component.html @@ -1,201 +1,199 @@
-
Reactive Forms (Model Driven Forms)
+
Reactive Forms (Model Driven Forms)
-
-
- - - - - -
+
+ + + + + +
- {{ validation.message | translate }} -
-
-
+ > + {{ validation.message | translate }} +
+ + -
- - - -
+ + + +
- {{ validation.message | translate }} -
-
-
+ > + {{ validation.message | translate }} +
+
+
- - - -
+ + +
- {{ validation.message | translate }} -
-
- -
- + > + {{ validation.message | translate }} +
+ + +
+
- - - - - - -
+ + + + + + + - - - Username - -
Has errors: {{ !!formGroup.get("username")!.errors }}
-
Has 'required' error: {{ formGroup.get("username")!.hasError("required") }}
-
- 'required' error: -
{{ formGroup.get("username")!.getError("required") | json }}
-
-
Is touched? {{ formGroup.get("username")!.touched }}
-
- Errors: -
{{ formGroup.get("username")!.errors | json }}
-
-
-
+ + + Username + +
Has errors: {{ !!formGroup.get("username")!.errors }}
+
Has 'required' error: {{ formGroup.get("username")!.hasError("required") }}
+
+ 'required' error: +
{{ formGroup.get("username")!.getError("required") | json }}
+
+
Is touched? {{ formGroup.get("username")!.touched }}
+
+ Errors: +
{{ formGroup.get("username")!.errors | json }}
+
+
+
- - Password - -
Has errors: {{ !!formGroup.get("matchingPasswords.password")!.errors }}
-
Has 'pattern' error: {{ formGroup.get("matchingPasswords.password")!.hasError("pattern") }}
-
Is touched? {{ formGroup.get("matchingPasswords.password")!.touched }}
-
- 'pattern' error: -
{{ formGroup.get("matchingPasswords.password")!.getError("pattern") | json }}
-
-
- Errors: -
{{ formGroup.get("matchingPasswords.password")!.errors | json }}
-
-
-
+ + Password + +
Has errors: {{ !!formGroup.get("matchingPasswords.password")!.errors }}
+
Has 'pattern' error: {{ formGroup.get("matchingPasswords.password")!.hasError("pattern") }}
+
Is touched? {{ formGroup.get("matchingPasswords.password")!.touched }}
+
+ 'pattern' error: +
{{ formGroup.get("matchingPasswords.password")!.getError("pattern") | json }}
+
+
+ Errors: +
{{ formGroup.get("matchingPasswords.password")!.errors | json }}
+
+
+
- - Confirm password - -
Has errors: {{ !!formGroup.get("matchingPasswords.confirmPassword")!.errors }}
-
Has 'required' error: {{ formGroup.get("matchingPasswords.confirmPassword")!.hasError("required") }}
-
Is touched? {{ formGroup.get("matchingPasswords.confirmPassword")!.touched }}
-
- 'required' error: -
{{ formGroup.get("matchingPasswords.confirmPassword")!.getError("required") | json }}
-
-
- Errors: -
{{ formGroup.get("matchingPasswords.confirmPassword")!.errors | json }}
-
-
-
-
+ + Confirm password + +
Has errors: {{ !!formGroup.get("matchingPasswords.confirmPassword")!.errors }}
+
Has 'required' error: {{ formGroup.get("matchingPasswords.confirmPassword")!.hasError("required") }}
+
Is touched? {{ formGroup.get("matchingPasswords.confirmPassword")!.touched }}
+
+ 'required' error: +
{{ formGroup.get("matchingPasswords.confirmPassword")!.getError("required") | json }}
+
+
+ Errors: +
{{ formGroup.get("matchingPasswords.confirmPassword")!.errors | json }}
+
+
+
+
- -

- No validation errors -

-
    - - -
  • - {{ validation.message | translate }} -
  • -
    -
    - - -
  • + +
  • + {{ validation.message | translate }} +
  • +
    +
    + + +
  • - {{ validation.message | translate }} -
  • -
    -
    - - -
  • + +
  • - {{ validation.message | translate }} -
  • -
    -
    -
-
-
-
+ > + {{ validation.message | translate }} + + + + + +
+