aboutsummaryrefslogtreecommitdiffstats
path: root/stories/ng2-component-lab/validation.component.exp.ts
diff options
context:
space:
mode:
Diffstat (limited to 'stories/ng2-component-lab/validation.component.exp.ts')
-rw-r--r--stories/ng2-component-lab/validation.component.exp.ts162
1 files changed, 0 insertions, 162 deletions
diff --git a/stories/ng2-component-lab/validation.component.exp.ts b/stories/ng2-component-lab/validation.component.exp.ts
deleted file mode 100644
index 7f18c93..0000000
--- a/stories/ng2-component-lab/validation.component.exp.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-import { experimentOn } from '@islavi/ng2-component-lab';
-import { RegexPatterns } from '../../src/angular/common/enums';
-import { DropDownOptionType, IDropDownOption } from './../../src/angular/form-elements/dropdown/dropdown-models';
-
-const options1: IDropDownOption[] = [
- {
- label: 'First Option',
- value: 'First Option',
- },
- {
- label: 'Second Option',
- value: 'Second Option',
- },
- {
- label: 'Third Option',
- value: 'Third Option',
- type: DropDownOptionType.Simple
- }
-];
-
-export default experimentOn('Validation')
- .group("Validation", [
- {
- id: 'validation1',
- showSource: true,
- title: 'Simple validation',
- description: 'Simple validation (validating that email is valid and that user inserted something in the field). \
- By default the validation starts after first key press',
- context: {
- emailPattern: RegexPatterns.email
- },
- template: `
- <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
- <sdc-validation [validateElement]="email">
- <sdc-required-validator message="Field is required!"></sdc-required-validator>
- <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
- </sdc-validation>
- `
- },
- {
- id: 'validation2',
- showSource: true,
- title: 'Simple validation',
- description: 'Simple validation',
- context: {
- numbersPattern: RegexPatterns.numbers,
- isValueHundred: (value: any) => {
- return (Number(value) === 100) ? true : false;
- }
- },
- template: `
- <sdc-input #numberValidator label="Please enter some number" [maxLength]="10" required="true"></sdc-input>
- <sdc-validation [validateElement]="numberValidator">
- <sdc-regex-validator message="This is not a number!" [pattern]="numbersPattern"></sdc-regex-validator>
- <sdc-custom-validator message="The number should be 100" [callback]="isValueHundred"></sdc-custom-validator>
- </sdc-validation>
- `
- },
- {
- id: 'validation3',
- showSource: true,
- title: 'Disabled validation',
- description: 'Disabled validation',
- context: {
- emailPattern: RegexPatterns.email
- },
- template: `
- <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
- <sdc-validation [validateElement]="email" disabled='true'>
- <sdc-required-validator message="Field is required!"></sdc-required-validator>
- <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
- </sdc-validation>
- `
- },
- {
- id: 'validation4',
- showSource: true,
- title: 'Validation with value already entered',
- description: 'Validation with value already entered',
- context: {
- emailPattern: RegexPatterns.email
- },
- template: `
- <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true" value="notvalidemail@"></sdc-input>
- <sdc-validation [validateElement]="email">
- <sdc-required-validator message="Field is required!"></sdc-required-validator>
- <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
- </sdc-validation>
- `
- },
- {
- id: 'validation5',
- showSource: true,
- title: 'Validation with validity changed callback',
- description: 'Simple validation with alert when validity changes',
- context: {
- numbersPattern: RegexPatterns.numbers,
- validityChanged: (newState: boolean) => {
- alert("Validity has changed to " + newState);
- }
- },
- template: `
- <sdc-input #validatorWithCallback label="Please enter a number" [maxLength]="10" required="true"></sdc-input>
- <sdc-validation [validateElement]="validatorWithCallback" (validityChanged)="validityChanged($event)">
- <sdc-regex-validator message="This is not a number!" [pattern]="numbersPattern"></sdc-regex-validator>
- </sdc-validation>
- `
- },
- {
- id: 'dropdownWithValidation',
- showSource: true,
- context: {
- options: options1,
- isThirdOption: (value: any) => {
- return value === 'Third Option';
- }
- },
- title: 'DropDown with validation',
- description: 'DropDown with validation',
- template: `
- <sdc-dropdown #mydropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options"></sdc-dropdown>
- <sdc-validation [validateElement]="mydropdown">
- <sdc-required-validator message="Field is required!"></sdc-required-validator>
- <sdc-custom-validator message="Please select the third option" [callback]="isThirdOption"></sdc-custom-validator>
- </sdc-validation>
- `
- },
- {
- id: 'validationGroup',
- showSource: true,
- context: {
- options: options1,
- emailPattern: RegexPatterns.email,
- isThirdOption: (value: any) => {
- return value === 'Third Option';
- },
- validateGroup: (validationGroup) => {
- validationGroup.validate();
- }
- },
- title: 'Validation group',
- description: 'Validation group (activating validation from code)',
- template: `
- <sdc-validation-group #validationGroup>
-
- <sdc-input #email label="Please enter valid email address" [maxLength]="50" required="true"></sdc-input>
- <sdc-validation [validateElement]="email">
- <sdc-required-validator message="Field is required!"></sdc-required-validator>
- <sdc-regex-validator message="This is not a valid email!" [pattern]="emailPattern"></sdc-regex-validator>
- </sdc-validation>
-
- <sdc-dropdown #mydropdown label="Hi I am a label" placeHolder="Please choose option" [options]="options"></sdc-dropdown>
- <sdc-validation [validateElement]="mydropdown">
- <sdc-required-validator message="Field is required!"></sdc-required-validator>
- <sdc-custom-validator message="Please select the third option" [callback]="isThirdOption"></sdc-custom-validator>
- </sdc-validation>
-
- </sdc-validation-group>
- <sdc-button text="validate group" (click)="validateGroup(validationGroup)"></sdc-button>
- `
- }
- ]);