197 | A proudly 🇮🇹 software development and data science startup.
11 | {{ message | mapToMessage: params }}
15 |
16 | `,
17 | styleUrls: ['./input-errors.component.scss']
18 | })
19 | export class InputErrorsComponent implements ErrorsComponent {
20 |
21 | @Input() public messages: string[] = [];
22 | @Input() public params: { [key: string]: any } = {};
23 | @Input() @HostBinding('class.is-inner') public innerValidationError: boolean;
24 |
25 | @Input()
26 | private control: AbstractControlDirective | AbstractControl;
27 |
28 | }
29 |
--------------------------------------------------------------------------------
/projects/xtream/ngx-validation-errors/src/lib/map-to-message.pipe.ts:
--------------------------------------------------------------------------------
1 | import {ChangeDetectorRef, Inject, Optional, Pipe, PipeTransform} from '@angular/core';
2 | import {InnerMapToMessagePipe} from './inner-map-to-message.pipe';
3 | import {MESSAGES_PIPE_FACTORY_TOKEN} from './injection-tokens';
4 |
5 | @Pipe({
6 | name: 'mapToMessage',
7 | pure: false
8 | })
9 | export class MapToMessagePipe implements PipeTransform {
10 |
11 | pipe: PipeTransform;
12 |
13 | constructor(
14 | @Optional() cdRef: ChangeDetectorRef,
15 | @Optional() @Inject(MESSAGES_PIPE_FACTORY_TOKEN) private pipeFactory: any
16 | ) {
17 |
18 | if (pipeFactory) {
19 | try {
20 | this.pipe = pipeFactory(cdRef);
21 | } catch (e) {
22 | console.error(e);
23 | this.pipe = new InnerMapToMessagePipe();
24 | }
25 | } else {
26 | this.pipe = new InnerMapToMessagePipe();
27 | }
28 | }
29 |
30 | transform(value: any, ...args: any): any {
31 | return this.pipe.transform(value, ...args);
32 | }
33 |
34 | }
35 |
--------------------------------------------------------------------------------
/projects/xtream/ngx-validation-errors/src/lib/ngx-validation-errors.module.ts:
--------------------------------------------------------------------------------
1 | import {FOR_ROOT_OPTIONS_TOKEN, ValidationErrorsConfigObject} from './injection-tokens';
2 | import {ModuleWithProviders, NgModule} from '@angular/core';
3 | import {InputErrorsComponent} from './input-errors.component';
4 | import {FormFieldContainerComponent} from './form-field-container.component';
5 | import {ValidationContextComponent} from './validation-context.component';
6 | import {VALIDATION_ERROR_CONFIG, ValidationErrorsConfig} from './error-validation-config';
7 | import {CommonModule} from '@angular/common';
8 | import {FormsModule, ReactiveFormsModule} from '@angular/forms';
9 | import {FormArrayContainerComponent} from './form-array-container.component';
10 | import {MapToMessagePipe} from './map-to-message.pipe';
11 | import {InnerMapToMessagePipe} from './inner-map-to-message.pipe';
12 | import {FormFieldEmptyContainerDirective} from './form-field-empty-container.directive';
13 |
14 |
15 | export const defaultConfig = {
16 | defaultContext: 'GENERAL',
17 | errorComponent: InputErrorsComponent as any
18 | } as ValidationErrorsConfig;
19 |
20 | export function configFactory(customConfig: ValidationErrorsConfig, currentConfig: ValidationErrorsConfig) {
21 | const actualConfig = {...currentConfig};
22 | if (customConfig) {
23 | if (customConfig.defaultContext) {
24 | actualConfig.defaultContext = customConfig.defaultContext;
25 | }
26 |
27 | if (customConfig.errorComponent) {
28 | actualConfig.errorComponent = customConfig.errorComponent;
29 | }
30 | }
31 | return actualConfig;
32 | }
33 |
34 | @NgModule({
35 | declarations: [
36 | InputErrorsComponent,
37 | FormFieldContainerComponent,
38 | FormFieldEmptyContainerDirective,
39 | FormArrayContainerComponent,
40 | ValidationContextComponent,
41 | MapToMessagePipe,
42 | InnerMapToMessagePipe
43 | ],
44 | imports: [
45 | CommonModule,
46 | FormsModule,
47 | ReactiveFormsModule
48 | ],
49 | exports: [
50 | InputErrorsComponent,
51 | FormFieldContainerComponent,
52 | FormArrayContainerComponent,
53 | ValidationContextComponent,
54 | FormFieldEmptyContainerDirective
55 | ],
56 | entryComponents: [
57 | InputErrorsComponent
58 | ]
59 | })
60 | export class NgxValidationErrorsModule {
61 |
62 | static forRoot(config?: ValidationErrorsConfig): ModuleWithProviders {
63 | return {
64 | ngModule: NgxValidationErrorsModule,
65 | providers: [
66 | {
67 | provide: ValidationErrorsConfigObject, useValue: defaultConfig as ValidationErrorsConfig
68 | },
69 | {
70 | provide: FOR_ROOT_OPTIONS_TOKEN,
71 | useValue: config
72 | },
73 | MapToMessagePipe,
74 | {
75 | provide: VALIDATION_ERROR_CONFIG,
76 | useFactory: configFactory,
77 | deps: [FOR_ROOT_OPTIONS_TOKEN, ValidationErrorsConfigObject]
78 | },
79 | MapToMessagePipe,
80 | InnerMapToMessagePipe
81 | ]
82 | };
83 | }
84 | }
85 |
86 |
--------------------------------------------------------------------------------
/projects/xtream/ngx-validation-errors/src/lib/toChangeObservable.ts:
--------------------------------------------------------------------------------
1 | import {AbstractControl} from '@angular/forms';
2 | import {merge, Observable, Subject} from 'rxjs';
3 | import {debounceTime, mergeAll, tap} from 'rxjs/operators';
4 |
5 | function wrapMethod(subject$: Subject
2 | 
3 |
4 |
3 | xtream validation errors lazy
5 |
6 |
7 |
8 |
9 |
31 |
32 |
33 |
45 |
46 |
--------------------------------------------------------------------------------
/src/app/lazy/lazy-form/lazy-form.component.ts:
--------------------------------------------------------------------------------
1 | import {Component, OnInit, ViewChild} from '@angular/core';
2 | import {AbstractControl, FormArray, FormControl, FormGroup, Validators} from '@angular/forms';
3 | import {TranslateService} from '@ngx-translate/core';
4 | import {ValidationContextComponent} from '@xtream/ngx-validation-errors';
5 | import {distinctUntilChanged, tap} from 'rxjs/operators';
6 |
7 | function minCheckSelected(size: number) {
8 | return (control: AbstractControl) => {
9 | const values = control.value as (boolean | undefined)[];
10 | const selected = values.filter(v => !!v).length;
11 | if (selected < size) {
12 | return {checkBoxes: true};
13 | }
14 | return null;
15 | };
16 | }
17 |
18 | @Component({
19 | selector: 'app-lazy-form',
20 | templateUrl: './lazy-form.component.html',
21 | styleUrls: ['./lazy-form.component.css']
22 | })
23 | export class LazyFormComponent implements OnInit {
24 |
25 | @ViewChild('firstForm', {
26 | read: ValidationContextComponent,
27 | static: true
28 | }) validationContext: ValidationContextComponent;
29 |
30 | heroForm: FormGroup;
31 |
32 | boxesInfo = [
33 | 'a',
34 | 'b',
35 | 'c',
36 | 'd'
37 | ];
38 |
39 | constructor(private translateService: TranslateService) {
40 | this.heroForm = new FormGroup({
41 | name: new FormControl(null, [Validators.required, Validators.minLength(4)]),
42 | surname: new FormControl({value: null, disabled: true}, [Validators.required, Validators.maxLength(1000)]),
43 | checkBoxes: new FormArray(this.boxesInfo.map(a => new FormControl()), [minCheckSelected(1)])
44 | });
45 |
46 | this.heroForm.valueChanges.pipe(
47 | distinctUntilChanged(),
48 | tap(v => {
49 | console.debug('v', v);
50 | if (v.name) {
51 | this.heroForm.controls['surname'].enable({emitEvent: false});
52 | } else {
53 | this.heroForm.controls['surname'].disable({emitEvent: false});
54 | }
55 | })
56 | ).subscribe()
57 | }
58 |
59 | ngOnInit(): void {
60 | this.translateService.setDefaultLang('en');
61 | this.translateService.use('en');
62 | }
63 |
64 | clearForm() {
65 | console.debug('this.validationContext', this.validationContext);
66 | this.validationContext.clear();
67 |
68 | }
69 |
70 | chooseLanguage(lan: string) {
71 | this.translateService.use(lan);
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/app/lazy/lazy-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import {LazyFormComponent} from './lazy-form/lazy-form.component';
4 |
5 | const routes: Routes = [
6 | {
7 | path:'',
8 | component: LazyFormComponent
9 | }
10 | ];
11 |
12 | @NgModule({
13 | imports: [RouterModule.forChild(routes)],
14 | exports: [RouterModule]
15 | })
16 | export class AppRoutingModule { }
17 |
--------------------------------------------------------------------------------
/src/app/lazy/lazy.module.ts:
--------------------------------------------------------------------------------
1 | import {NgModule} from '@angular/core';
2 | import {LazyFormComponent} from './lazy-form/lazy-form.component';
3 | import {AppRoutingModule} from './lazy-routing.module';
4 | import {ReactiveFormsModule} from '@angular/forms';
5 | import {SharedModule} from '../shared/shared.module';
6 |
7 | @NgModule({
8 | imports: [
9 | AppRoutingModule,
10 | ReactiveFormsModule,
11 | SharedModule,
12 | ],
13 | declarations: [LazyFormComponent]
14 | })
15 | export class LazyModule {
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/main-from/main-from.component.css:
--------------------------------------------------------------------------------
1 |
2 | .input-wrapper {
3 | position: relative;
4 | padding-bottom: 20px;
5 | }
6 |
7 | form {
8 | width: 50%;
9 | margin: auto;
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/main-from/main-from.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
4 | xtream validation errors
6 | 19 | 20 | 21 | 33 | 34 | -------------------------------------------------------------------------------- /src/app/main-from/main-from.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, OnInit, ViewChild} from '@angular/core'; 2 | import {FormControl, FormGroup, Validators} from '@angular/forms'; 3 | import {TranslateService} from '@ngx-translate/core'; 4 | import {ValidationContextComponent} from '@xtream/ngx-validation-errors'; 5 | 6 | @Component({ 7 | selector: 'app-main-from', 8 | templateUrl: './main-from.component.html', 9 | styleUrls: ['./main-from.component.css'] 10 | }) 11 | export class MainFromComponent implements OnInit { 12 | 13 | heroForm: FormGroup; 14 | @ViewChild('firstForm', {read: ValidationContextComponent, static: true}) validationContext: ValidationContextComponent; 15 | 16 | constructor(private translateService: TranslateService) { 17 | this.heroForm = new FormGroup({ 18 | name: new FormControl(null, [Validators.required, Validators.minLength(4)]), 19 | surname: new FormControl(null, [Validators.required, Validators.maxLength(1000)]) 20 | }); 21 | } 22 | 23 | ngOnInit(): void { 24 | this.translateService.setDefaultLang('en'); 25 | this.translateService.use('en'); 26 | } 27 | 28 | reset(): void { 29 | this.validationContext.clear(); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/app/material-from/material-from.component.css: -------------------------------------------------------------------------------- 1 | 2 | .input-wrapper { 3 | position: relative; 4 | padding-bottom: 20px; 5 | } 6 | 7 | form { 8 | width: 50%; 9 | margin: auto; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/material-from/material-from.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
3 |