-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(showcase): add the ngx-form-errors demo to the showcase
ISSUES CLOSED: #1195
- Loading branch information
1 parent
bee0d72
commit 4a98d3c
Showing
28 changed files
with
1,113 additions
and
53 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
3 changes: 3 additions & 0 deletions
3
showcase/src/app/welcome/pages/reactive-form-errors/components/card/card.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <mat-card> | ||
| <ng-content></ng-content> | ||
| </mat-card> |
5 changes: 5 additions & 0 deletions
5
showcase/src/app/welcome/pages/reactive-form-errors/components/card/card.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| :host mat-card { | ||
| box-sizing: border-box; | ||
| width: 100%; | ||
| min-height: 100%; | ||
| } |
46 changes: 46 additions & 0 deletions
46
showcase/src/app/welcome/pages/reactive-form-errors/components/card/card.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { Component, HostBinding, Input } from "@angular/core"; | ||
|
|
||
| type Colors = "primary" | "accent" | "warning" | "success"; | ||
|
|
||
| @Component({ | ||
| selector: "app-card", | ||
| templateUrl: "./card.component.html", | ||
| styleUrls: ["./card.component.scss"] | ||
| }) | ||
| export class CardComponent { | ||
| @HostBinding("class.app-card") | ||
| public cssClass = true; | ||
| @HostBinding("class.app-color-primary") | ||
| public primaryColor!: boolean; | ||
| @HostBinding("class.app-color-accent") | ||
| public accentColor!: boolean; | ||
| @HostBinding("class.app-color-warning") | ||
| public warningColor!: boolean; | ||
| @HostBinding("class.app-color-success") | ||
| public successColor!: boolean; | ||
|
|
||
| @Input() | ||
| public set color(color: Colors) { | ||
| this.primaryColor = false; | ||
| this.accentColor = false; | ||
| this.warningColor = false; | ||
| this.successColor = false; | ||
|
|
||
| switch (color) { | ||
| case "primary": | ||
| this.primaryColor = true; | ||
| break; | ||
| case "accent": | ||
| this.accentColor = true; | ||
| break; | ||
| case "warning": | ||
| this.warningColor = true; | ||
| break; | ||
| case "success": | ||
| this.successColor = true; | ||
| break; | ||
| default: | ||
| break; | ||
| } | ||
| } | ||
| } |
20 changes: 20 additions & 0 deletions
20
showcase/src/app/welcome/pages/reactive-form-errors/components/card/card.theme.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| .app-card.app-color-primary mat-card { | ||
| background-color: mat-color($primary-palette, 500); | ||
| color: mat-contrast($primary-palette, 500); | ||
| } | ||
|
|
||
| .app-card.app-color-accent mat-card { | ||
| background-color: mat-color($primary-palette, 500); | ||
| color: mat-contrast($primary-palette, 500); | ||
| } | ||
|
|
||
| .app-card.app-color-warning mat-card { | ||
| background-color: mat-color($warning-palette, 500); | ||
| color: mat-contrast($warning-palette, 500); | ||
| } | ||
|
|
||
| .app-card.app-color-success mat-card { | ||
| /*Themes do not have a success map by default*/ | ||
| background-color: mat-color($success-palette, 500); | ||
| color: mat-contrast($success-palette, 500); | ||
| } |
1 change: 1 addition & 0 deletions
1
showcase/src/app/welcome/pages/reactive-form-errors/components/card/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./card.component"; |
2 changes: 2 additions & 0 deletions
2
showcase/src/app/welcome/pages/reactive-form-errors/components/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from "./card"; | ||
| export * from "./translated-form-error"; |
1 change: 1 addition & 0 deletions
1
...case/src/app/welcome/pages/reactive-form-errors/components/translated-form-error/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./translated-form-error.component"; |
1 change: 1 addition & 0 deletions
1
...eactive-form-errors/components/translated-form-error/translated-form-error.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| <div *ngFor="let error of errors; trackBy: trackError">{{ error.message | translate: error.params }}</div> |
47 changes: 47 additions & 0 deletions
47
.../reactive-form-errors/components/translated-form-error/translated-form-error.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { Component, HostBinding, OnInit } from "@angular/core"; | ||
| import { LangChangeEvent, TranslateService } from "@ngx-translate/core"; | ||
| import { Observable } from "rxjs"; | ||
| import { NgxFormErrorComponent, NgxFormFieldError } from "@nationalbankbelgium/ngx-form-errors"; | ||
|
|
||
| @Component({ | ||
| selector: "app-translated-form-error", | ||
| templateUrl: "./translated-form-error.component.html" | ||
| }) | ||
| export class TranslatedFormErrorComponent implements NgxFormErrorComponent, OnInit { | ||
| @HostBinding("class") | ||
| public cssClass = "translated-form-error"; | ||
|
|
||
| public errors: NgxFormFieldError[] = []; | ||
| public errors$!: Observable<NgxFormFieldError[]>; | ||
| public fieldName!: string; | ||
|
|
||
| public constructor(public translateService: TranslateService) {} | ||
|
|
||
| public ngOnInit(): void { | ||
| this.translateService.onLangChange.subscribe((_ev: LangChangeEvent) => { | ||
| this.updateTranslateFieldName(this.translateService.instant(this.fieldName)); | ||
| }); | ||
| } | ||
|
|
||
| public subscribeToErrors(): void { | ||
| this.errors$.subscribe((errors: NgxFormFieldError[]) => { | ||
| 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.updateTranslateFieldName(this.translateService.instant(this.fieldName)); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| public updateTranslateFieldName(translatedFieldName: string): void { | ||
| for (const error of this.errors) { | ||
| error.params = { ...error.params, fieldName: translatedFieldName }; | ||
| } | ||
| } | ||
|
|
||
| public trackError(index: number): number { | ||
| return index; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./reactive-form-errors-page.component"; |
Oops, something went wrong.