aboutsummaryrefslogtreecommitdiffstats
path: root/src/angular/form-elements/validation
diff options
context:
space:
mode:
Diffstat (limited to 'src/angular/form-elements/validation')
-rw-r--r--src/angular/form-elements/validation/validatable.component.ts8
-rw-r--r--src/angular/form-elements/validation/validation-group.component.html.ts2
-rw-r--r--src/angular/form-elements/validation/validation-group.component.ts12
-rw-r--r--src/angular/form-elements/validation/validation.component.html.ts4
-rw-r--r--src/angular/form-elements/validation/validation.component.ts9
-rw-r--r--src/angular/form-elements/validation/validation.module.ts1
-rw-r--r--src/angular/form-elements/validation/validators/base.validator.component.html.ts4
-rw-r--r--src/angular/form-elements/validation/validators/base.validator.component.ts8
-rw-r--r--src/angular/form-elements/validation/validators/custom.validator.component.ts2
-rw-r--r--src/angular/form-elements/validation/validators/regex.validator.component.ts2
-rw-r--r--src/angular/form-elements/validation/validators/required.validator.component.ts2
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',