diff options
Diffstat (limited to 'src/angular/form-elements/validation')
11 files changed, 19 insertions, 35 deletions
diff --git a/src/angular/form-elements/validation/validatable.component.ts b/src/angular/form-elements/validation/validatable.component.ts index 4817dea..3201e0b 100644 --- a/src/angular/form-elements/validation/validatable.component.ts +++ b/src/angular/form-elements/validation/validatable.component.ts @@ -1,24 +1,24 @@ -import { Input, Component } from "@angular/core"; -import { ValidationComponent } from './validation.component'; import { Subject } from 'rxjs/Subject'; import { IValidatableComponent } from './validatable.interface'; export abstract class ValidatableComponent implements IValidatableComponent { // Each ValidatableComponent should handle the style in case of error, according to this boolean - public valid = true; - + public valid: boolean; + public dirty: boolean; // Each ValidatableComponent will notify when the value is changed. public notifier: Subject<string>; constructor() { this.notifier = new Subject(); + this.dirty = false; } public abstract getValue(): any; // Each ValidatableComponent should call the valueChanged on value changed function. protected valueChanged = (value: any): void => { + this.dirty = true; this.notifier.next(value); } diff --git a/src/angular/form-elements/validation/validation-group.component.html.ts b/src/angular/form-elements/validation/validation-group.component.html.ts index dff591e..4e5e362 100644 --- a/src/angular/form-elements/validation/validation-group.component.html.ts +++ b/src/angular/form-elements/validation/validation-group.component.html.ts @@ -1,3 +1,3 @@ -export default ` +export const template = ` <ng-content></ng-content> `; diff --git a/src/angular/form-elements/validation/validation-group.component.ts b/src/angular/form-elements/validation/validation-group.component.ts index 59ecf4c..4231bbf 100644 --- a/src/angular/form-elements/validation/validation-group.component.ts +++ b/src/angular/form-elements/validation/validation-group.component.ts @@ -1,15 +1,7 @@ import { Input, Component, ContentChildren, EventEmitter, Output, QueryList, SimpleChanges, HostBinding, AfterContentInit } from "@angular/core"; -import { AbstractControl, FormControl } from "@angular/forms"; -import { Subscribable } from "rxjs/Observable"; -import { AnonymousSubscription } from "rxjs/Subscription"; -import { IValidator } from './validators/validator.interface'; import { ValidatorComponent } from './validators/base.validator.component'; -import { RegexValidatorComponent } from './validators/regex.validator.component'; -import { RequiredValidatorComponent } from './validators/required.validator.component'; -import { ValidatableComponent } from './validatable.component'; import { ValidationComponent } from './validation.component'; -import { CustomValidatorComponent } from './validators/custom.validator.component'; -import template from "./validation.component.html"; +import { template } from "./validation-group.component.html"; @Component({ selector: 'sdc-validation-group', @@ -37,7 +29,7 @@ export class ValidationGroupComponent implements AfterContentInit { let validationResult = true; // Iterate over all validationComponent inside the group and return boolean result true in case all validations passed. this.validationsComponents.forEach((validationComponent) => { - if (validationComponent.validate()) { + if (!validationComponent.validate()) { validationResult = false; } }); diff --git a/src/angular/form-elements/validation/validation.component.html.ts b/src/angular/form-elements/validation/validation.component.html.ts index 0f11a23..438cec1 100644 --- a/src/angular/form-elements/validation/validation.component.html.ts +++ b/src/angular/form-elements/validation/validation.component.html.ts @@ -1,3 +1,3 @@ -export default ` -<ng-content *ngIf="!disabled"></ng-content> +export const template = ` +<ng-content *ngIf="!disabled && (validateElement && validateElement.dirty)"></ng-content> `; diff --git a/src/angular/form-elements/validation/validation.component.ts b/src/angular/form-elements/validation/validation.component.ts index 4abdd12..289aeda 100644 --- a/src/angular/form-elements/validation/validation.component.ts +++ b/src/angular/form-elements/validation/validation.component.ts @@ -1,14 +1,10 @@ import { Input, Component, ContentChildren, EventEmitter, Output, QueryList, SimpleChanges, HostBinding, AfterContentInit } from "@angular/core"; -import { AbstractControl, FormControl } from "@angular/forms"; -import { Subscribable } from "rxjs/Observable"; -import { AnonymousSubscription } from "rxjs/Subscription"; -import { IValidator } from './validators/validator.interface'; import { ValidatorComponent } from './validators/base.validator.component'; import { RegexValidatorComponent } from './validators/regex.validator.component'; import { RequiredValidatorComponent } from './validators/required.validator.component'; import { ValidatableComponent } from './validatable.component'; import { CustomValidatorComponent } from './validators/custom.validator.component'; -import template from "./validation.component.html"; +import { template } from "./validation.component.html"; @Component({ selector: 'sdc-validation', @@ -47,6 +43,9 @@ export class ValidationComponent implements AfterContentInit { }, (error) => console.log('Validation subscribe error') ); + // init validateElement.valid. + const value = this.validateElement.getValue(); + this.validateElement.notifier.next(value); } public validate = (): boolean => { diff --git a/src/angular/form-elements/validation/validation.module.ts b/src/angular/form-elements/validation/validation.module.ts index 4213f76..a6aa41e 100644 --- a/src/angular/form-elements/validation/validation.module.ts +++ b/src/angular/form-elements/validation/validation.module.ts @@ -3,7 +3,6 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms"; import { CommonModule } from "@angular/common"; import { SvgIconModule } from './../../svg-icon/svg-icon.module'; import { ValidationComponent } from './validation.component'; -import { ValidatorComponent } from './validators/base.validator.component'; import { RequiredValidatorComponent } from './validators/required.validator.component'; import { RegexValidatorComponent } from './validators/regex.validator.component'; import { CustomValidatorComponent } from './validators/custom.validator.component'; diff --git a/src/angular/form-elements/validation/validators/base.validator.component.html.ts b/src/angular/form-elements/validation/validators/base.validator.component.html.ts index aba8eed..d96ee3b 100644 --- a/src/angular/form-elements/validation/validators/base.validator.component.html.ts +++ b/src/angular/form-elements/validation/validators/base.validator.component.html.ts @@ -1,6 +1,6 @@ -export default ` +export const template = ` <svg-icon-label - *ngIf="!isValid" + *ngIf="!isValid && !disabled" name="alert-triangle" mode="error" size="small" diff --git a/src/angular/form-elements/validation/validators/base.validator.component.ts b/src/angular/form-elements/validation/validators/base.validator.component.ts index 3d751af..8fd0361 100644 --- a/src/angular/form-elements/validation/validators/base.validator.component.ts +++ b/src/angular/form-elements/validation/validators/base.validator.component.ts @@ -1,18 +1,12 @@ import { Input, Component, ContentChildren, EventEmitter, Output, QueryList, SimpleChanges, HostBinding } from "@angular/core"; -import { IValidator } from './validator.interface'; -import template from "./base.validator.component.html"; -@Component({ - selector: 'sdc-validator', - template: template -}) export abstract class ValidatorComponent { @Input() public message: any; @Input() public disabled: boolean; @HostBinding('class') classes; - protected isValid: boolean; + public isValid: boolean; constructor() { this.disabled = false; diff --git a/src/angular/form-elements/validation/validators/custom.validator.component.ts b/src/angular/form-elements/validation/validators/custom.validator.component.ts index eb09636..0ec0e68 100644 --- a/src/angular/form-elements/validation/validators/custom.validator.component.ts +++ b/src/angular/form-elements/validation/validators/custom.validator.component.ts @@ -1,7 +1,7 @@ import { Input, Component } from "@angular/core"; import { ValidatorComponent } from "./base.validator.component"; import { IValidator } from './validator.interface'; -import template from "./base.validator.component.html"; +import { template } from "./base.validator.component.html"; @Component({ selector: 'sdc-custom-validator', diff --git a/src/angular/form-elements/validation/validators/regex.validator.component.ts b/src/angular/form-elements/validation/validators/regex.validator.component.ts index 5929016..5a213a9 100644 --- a/src/angular/form-elements/validation/validators/regex.validator.component.ts +++ b/src/angular/form-elements/validation/validators/regex.validator.component.ts @@ -1,7 +1,7 @@ import { Input, Component } from "@angular/core"; import { ValidatorComponent } from "./base.validator.component"; import { IValidator } from './validator.interface'; -import template from "./base.validator.component.html"; +import { template } from "./base.validator.component.html"; @Component({ selector: 'sdc-regex-validator', diff --git a/src/angular/form-elements/validation/validators/required.validator.component.ts b/src/angular/form-elements/validation/validators/required.validator.component.ts index 7eee932..fc550ca 100644 --- a/src/angular/form-elements/validation/validators/required.validator.component.ts +++ b/src/angular/form-elements/validation/validators/required.validator.component.ts @@ -1,7 +1,7 @@ import { Input, Component } from "@angular/core"; import { ValidatorComponent } from "./base.validator.component"; import { IValidator } from './validator.interface'; -import template from "./base.validator.component.html"; +import { template } from "./base.validator.component.html"; @Component({ selector: 'sdc-required-validator', |