-
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
62c11f7
commit a839e85
Showing
28 changed files
with
1,083 additions
and
46 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%; | ||
} |
44 changes: 44 additions & 0 deletions
44
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,44 @@ | ||
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-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"; |
31 changes: 31 additions & 0 deletions
31
showcase/src/app/welcome/pages/reactive-form-errors/password-validator.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,31 @@ | ||
import { FormControl, FormGroup, ValidationErrors, ValidatorFn } from "@angular/forms"; | ||
|
||
export class PasswordValidator { | ||
// Inspired on: http://plnkr.co/edit/Zcbg2T3tOxYmhxs7vaAm?p=preview | ||
public static areEqual(formGroup: FormGroup): ValidationErrors | null { | ||
let value: string | undefined; | ||
let valid = true; | ||
|
||
for (const key in formGroup.controls) { | ||
if (formGroup.controls.hasOwnProperty(key)) { | ||
const control: FormControl = <FormControl>formGroup.controls[key]; | ||
|
||
if (value === undefined) { | ||
value = control.value; | ||
} else if (value !== control.value) { | ||
valid = false; | ||
break; | ||
} | ||
} | ||
} | ||
|
||
/* tslint:disable-next-line:no-null-keyword */ | ||
return valid ? null : { areEqual: true }; | ||
} | ||
} | ||
|
||
export function getConfirmPasswordValidator(formGroup: FormGroup): ValidatorFn { | ||
return (): ValidationErrors | null => { | ||
return PasswordValidator.areEqual(formGroup); | ||
}; | ||
} |
Oops, something went wrong.