From 8ca1ea5d4264366ce8bddcc6fbacf635a6c38f5c Mon Sep 17 00:00:00 2001 From: Mario Arteaga Date: Sun, 19 May 2019 17:37:47 -0400 Subject: [PATCH 1/2] Disabling success state --- .../lib/Components/form-group/form-group.component.ts | 9 ++++++--- .../src/lib/Components/messages/messages.component.ts | 4 +++- .../src/lib/Directives/form-control.directive.ts | 6 ++++-- .../Models/NgBootstrapFormValidationModuleOptions.ts | 1 + .../src/lib/Tokens/tokens.ts | 4 ++++ .../src/lib/ng-bootstrap-form-validation.module.ts | 10 +++++++++- 6 files changed, 27 insertions(+), 7 deletions(-) diff --git a/projects/ng-bootstrap-form-validation/src/lib/Components/form-group/form-group.component.ts b/projects/ng-bootstrap-form-validation/src/lib/Components/form-group/form-group.component.ts index a0811b5..7ab6a05 100644 --- a/projects/ng-bootstrap-form-validation/src/lib/Components/form-group/form-group.component.ts +++ b/projects/ng-bootstrap-form-validation/src/lib/Components/form-group/form-group.component.ts @@ -7,12 +7,14 @@ import { Input, QueryList, OnInit, - AfterContentInit + AfterContentInit, + Inject } from "@angular/core"; import { FormControlName } from "@angular/forms"; import { ErrorMessageService } from "../../Services/error-message.service"; import { MessagesComponent } from "../messages/messages.component"; import { ErrorMessage } from "../../Models/error-message"; +import { ADD_SUCCESS_CLASS } from "../../Tokens/tokens"; @Component({ // tslint:disable:component-selector @@ -45,7 +47,7 @@ export class FormGroupComponent implements OnInit, AfterContentInit { return ( !this.FormControlNames.some(c => !c.valid) && this.FormControlNames.some(c => c.dirty && c.touched) && - !this.validationDisabled + (!this.validationDisabled || this.addSuccessClass) ); } @@ -58,7 +60,8 @@ export class FormGroupComponent implements OnInit, AfterContentInit { constructor( private elRef: ElementRef, - private errorMessageService: ErrorMessageService + private errorMessageService: ErrorMessageService, + @Inject(ADD_SUCCESS_CLASS) private addSuccessClass: boolean ) {} ngAfterContentInit() { diff --git a/projects/ng-bootstrap-form-validation/src/lib/Components/messages/messages.component.ts b/projects/ng-bootstrap-form-validation/src/lib/Components/messages/messages.component.ts index 79f7f59..10f01d7 100644 --- a/projects/ng-bootstrap-form-validation/src/lib/Components/messages/messages.component.ts +++ b/projects/ng-bootstrap-form-validation/src/lib/Components/messages/messages.component.ts @@ -5,7 +5,9 @@ import { BOOTSTRAP_VERSION } from "../../Tokens/tokens"; @Component({ selector: "bfv-messages", template: ` - {{message}} + {{ + message + }} `, styles: [ ` diff --git a/projects/ng-bootstrap-form-validation/src/lib/Directives/form-control.directive.ts b/projects/ng-bootstrap-form-validation/src/lib/Directives/form-control.directive.ts index db9ddba..c0cfd35 100644 --- a/projects/ng-bootstrap-form-validation/src/lib/Directives/form-control.directive.ts +++ b/projects/ng-bootstrap-form-validation/src/lib/Directives/form-control.directive.ts @@ -9,7 +9,7 @@ import { } from "@angular/core"; import { ControlContainer, FormControl } from "@angular/forms"; import { BootstrapVersion } from "../Enums/BootstrapVersion"; -import { BOOTSTRAP_VERSION } from "../Tokens/tokens"; +import { ADD_SUCCESS_CLASS, BOOTSTRAP_VERSION } from "../Tokens/tokens"; export function controlPath(name: string, parent: ControlContainer): string[] { // tslint:disable-next-line:no-non-null-assertion @@ -34,7 +34,8 @@ export class FormControlDirective { return ( this.bootstrapFour && this.control.valid && - (this.control.touched || this.control.dirty) + (this.control.touched || this.control.dirty) && + this.addSuccessClass ); } @@ -74,6 +75,7 @@ export class FormControlDirective { @Host() @SkipSelf() private parent: ControlContainer, + @Inject(ADD_SUCCESS_CLASS) private addSuccessClass: boolean, @Inject(BOOTSTRAP_VERSION) private bootstrapVersion: BootstrapVersion ) {} } diff --git a/projects/ng-bootstrap-form-validation/src/lib/Models/NgBootstrapFormValidationModuleOptions.ts b/projects/ng-bootstrap-form-validation/src/lib/Models/NgBootstrapFormValidationModuleOptions.ts index 2502aa3..3700261 100644 --- a/projects/ng-bootstrap-form-validation/src/lib/Models/NgBootstrapFormValidationModuleOptions.ts +++ b/projects/ng-bootstrap-form-validation/src/lib/Models/NgBootstrapFormValidationModuleOptions.ts @@ -2,6 +2,7 @@ import { BootstrapVersion } from "../Enums/BootstrapVersion"; import { ErrorMessage } from "./error-message"; export interface NgBootstrapFormValidationModuleOptions { + addSuccessClass?: boolean; customErrorMessages?: ErrorMessage[]; bootstrapVersion: BootstrapVersion; } diff --git a/projects/ng-bootstrap-form-validation/src/lib/Tokens/tokens.ts b/projects/ng-bootstrap-form-validation/src/lib/Tokens/tokens.ts index c84dd53..61fe4dc 100644 --- a/projects/ng-bootstrap-form-validation/src/lib/Tokens/tokens.ts +++ b/projects/ng-bootstrap-form-validation/src/lib/Tokens/tokens.ts @@ -2,6 +2,10 @@ import { InjectionToken } from "@angular/core"; import { BootstrapVersion } from "../Enums/BootstrapVersion"; import { ErrorMessage } from "../Models/error-message"; +export const ADD_SUCCESS_CLASS = new InjectionToken( + "ng-bootstrap-form-validation add success class option" +); + export const CUSTOM_ERROR_MESSAGES = new InjectionToken( "ng-bootstrap-form-validation custom error messages" ); diff --git a/projects/ng-bootstrap-form-validation/src/lib/ng-bootstrap-form-validation.module.ts b/projects/ng-bootstrap-form-validation/src/lib/ng-bootstrap-form-validation.module.ts index 5dc4007..ba85e90 100644 --- a/projects/ng-bootstrap-form-validation/src/lib/ng-bootstrap-form-validation.module.ts +++ b/projects/ng-bootstrap-form-validation/src/lib/ng-bootstrap-form-validation.module.ts @@ -3,7 +3,11 @@ import { NgModule, ModuleWithProviders } from "@angular/core"; import { FormValidationDirective } from "./Directives/form-validation.directive"; import { MessagesComponent } from "./Components/messages/messages.component"; import { ErrorMessageService } from "./Services/error-message.service"; -import { CUSTOM_ERROR_MESSAGES, BOOTSTRAP_VERSION } from "./Tokens/tokens"; +import { + ADD_SUCCESS_CLASS, + CUSTOM_ERROR_MESSAGES, + BOOTSTRAP_VERSION +} from "./Tokens/tokens"; import { BootstrapVersion } from "./Enums/BootstrapVersion"; import { FormGroupComponent } from "./Components/form-group/form-group.component"; import { NgBootstrapFormValidationModuleOptions } from "./Models/NgBootstrapFormValidationModuleOptions"; @@ -33,6 +37,10 @@ export class NgBootstrapFormValidationModule { return { ngModule: NgBootstrapFormValidationModule, providers: [ + { + provide: ADD_SUCCESS_CLASS, + useValue: userOptions.addSuccessClass || true + }, { provide: CUSTOM_ERROR_MESSAGES, useValue: userOptions.customErrorMessages || [], From e129c102f7579074b1170caeebd784119b382b06 Mon Sep 17 00:00:00 2001 From: Mario Arteaga Date: Mon, 20 May 2019 20:52:24 -0400 Subject: [PATCH 2/2] Change addSuccessClass to disableSuccessState --- .../src/lib/Components/form-group/form-group.component.ts | 7 ++++--- .../src/lib/Directives/form-control.directive.ts | 6 +++--- .../lib/Models/NgBootstrapFormValidationModuleOptions.ts | 2 +- .../ng-bootstrap-form-validation/src/lib/Tokens/tokens.ts | 4 ++-- .../src/lib/ng-bootstrap-form-validation.module.ts | 6 +++--- 5 files changed, 13 insertions(+), 12 deletions(-) diff --git a/projects/ng-bootstrap-form-validation/src/lib/Components/form-group/form-group.component.ts b/projects/ng-bootstrap-form-validation/src/lib/Components/form-group/form-group.component.ts index 7ab6a05..0632d02 100644 --- a/projects/ng-bootstrap-form-validation/src/lib/Components/form-group/form-group.component.ts +++ b/projects/ng-bootstrap-form-validation/src/lib/Components/form-group/form-group.component.ts @@ -14,7 +14,7 @@ import { FormControlName } from "@angular/forms"; import { ErrorMessageService } from "../../Services/error-message.service"; import { MessagesComponent } from "../messages/messages.component"; import { ErrorMessage } from "../../Models/error-message"; -import { ADD_SUCCESS_CLASS } from "../../Tokens/tokens"; +import { DISABLE_SUCCESS_STATE } from "../../Tokens/tokens"; @Component({ // tslint:disable:component-selector @@ -47,7 +47,8 @@ export class FormGroupComponent implements OnInit, AfterContentInit { return ( !this.FormControlNames.some(c => !c.valid) && this.FormControlNames.some(c => c.dirty && c.touched) && - (!this.validationDisabled || this.addSuccessClass) + !this.validationDisabled && + !this.disableSuccessState ); } @@ -61,7 +62,7 @@ export class FormGroupComponent implements OnInit, AfterContentInit { constructor( private elRef: ElementRef, private errorMessageService: ErrorMessageService, - @Inject(ADD_SUCCESS_CLASS) private addSuccessClass: boolean + @Inject(DISABLE_SUCCESS_STATE) private disableSuccessState: boolean ) {} ngAfterContentInit() { diff --git a/projects/ng-bootstrap-form-validation/src/lib/Directives/form-control.directive.ts b/projects/ng-bootstrap-form-validation/src/lib/Directives/form-control.directive.ts index c0cfd35..e77c4ca 100644 --- a/projects/ng-bootstrap-form-validation/src/lib/Directives/form-control.directive.ts +++ b/projects/ng-bootstrap-form-validation/src/lib/Directives/form-control.directive.ts @@ -9,7 +9,7 @@ import { } from "@angular/core"; import { ControlContainer, FormControl } from "@angular/forms"; import { BootstrapVersion } from "../Enums/BootstrapVersion"; -import { ADD_SUCCESS_CLASS, BOOTSTRAP_VERSION } from "../Tokens/tokens"; +import { DISABLE_SUCCESS_STATE, BOOTSTRAP_VERSION } from "../Tokens/tokens"; export function controlPath(name: string, parent: ControlContainer): string[] { // tslint:disable-next-line:no-non-null-assertion @@ -35,7 +35,7 @@ export class FormControlDirective { this.bootstrapFour && this.control.valid && (this.control.touched || this.control.dirty) && - this.addSuccessClass + !this.disableSuccessState ); } @@ -75,7 +75,7 @@ export class FormControlDirective { @Host() @SkipSelf() private parent: ControlContainer, - @Inject(ADD_SUCCESS_CLASS) private addSuccessClass: boolean, + @Inject(DISABLE_SUCCESS_STATE) private disableSuccessState: boolean, @Inject(BOOTSTRAP_VERSION) private bootstrapVersion: BootstrapVersion ) {} } diff --git a/projects/ng-bootstrap-form-validation/src/lib/Models/NgBootstrapFormValidationModuleOptions.ts b/projects/ng-bootstrap-form-validation/src/lib/Models/NgBootstrapFormValidationModuleOptions.ts index 3700261..8e7ee24 100644 --- a/projects/ng-bootstrap-form-validation/src/lib/Models/NgBootstrapFormValidationModuleOptions.ts +++ b/projects/ng-bootstrap-form-validation/src/lib/Models/NgBootstrapFormValidationModuleOptions.ts @@ -2,7 +2,7 @@ import { BootstrapVersion } from "../Enums/BootstrapVersion"; import { ErrorMessage } from "./error-message"; export interface NgBootstrapFormValidationModuleOptions { - addSuccessClass?: boolean; + disableSuccessState?: boolean; customErrorMessages?: ErrorMessage[]; bootstrapVersion: BootstrapVersion; } diff --git a/projects/ng-bootstrap-form-validation/src/lib/Tokens/tokens.ts b/projects/ng-bootstrap-form-validation/src/lib/Tokens/tokens.ts index 61fe4dc..ad3c678 100644 --- a/projects/ng-bootstrap-form-validation/src/lib/Tokens/tokens.ts +++ b/projects/ng-bootstrap-form-validation/src/lib/Tokens/tokens.ts @@ -2,8 +2,8 @@ import { InjectionToken } from "@angular/core"; import { BootstrapVersion } from "../Enums/BootstrapVersion"; import { ErrorMessage } from "../Models/error-message"; -export const ADD_SUCCESS_CLASS = new InjectionToken( - "ng-bootstrap-form-validation add success class option" +export const DISABLE_SUCCESS_STATE = new InjectionToken( + "ng-bootstrap-form-validation disable success state" ); export const CUSTOM_ERROR_MESSAGES = new InjectionToken( diff --git a/projects/ng-bootstrap-form-validation/src/lib/ng-bootstrap-form-validation.module.ts b/projects/ng-bootstrap-form-validation/src/lib/ng-bootstrap-form-validation.module.ts index ba85e90..264a179 100644 --- a/projects/ng-bootstrap-form-validation/src/lib/ng-bootstrap-form-validation.module.ts +++ b/projects/ng-bootstrap-form-validation/src/lib/ng-bootstrap-form-validation.module.ts @@ -4,7 +4,7 @@ import { FormValidationDirective } from "./Directives/form-validation.directive" import { MessagesComponent } from "./Components/messages/messages.component"; import { ErrorMessageService } from "./Services/error-message.service"; import { - ADD_SUCCESS_CLASS, + DISABLE_SUCCESS_STATE, CUSTOM_ERROR_MESSAGES, BOOTSTRAP_VERSION } from "./Tokens/tokens"; @@ -38,8 +38,8 @@ export class NgBootstrapFormValidationModule { ngModule: NgBootstrapFormValidationModule, providers: [ { - provide: ADD_SUCCESS_CLASS, - useValue: userOptions.addSuccessClass || true + provide: DISABLE_SUCCESS_STATE, + useValue: userOptions.disableSuccessState || false }, { provide: CUSTOM_ERROR_MESSAGES,