diff options
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/formControls/component')
19 files changed, 530 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.html new file mode 100644 index 000000000..26362ebed --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.html @@ -0,0 +1,11 @@ +<div class="details-item"> + <input type="checkbox" + id="{{data?.dataTestId}}" + [attr.data-tests-id]="data?.dataTestId" + [checked]="data?.value" + name="{{data?.controlName}}" + [formControl]="form?.controls[data?.controlName]" + data-toggle="toggle"> + <label class="checkbox-label" + for="{{data?.dataTestId}}">{{data?.displayName}}</label> +</div> diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts new file mode 100644 index 000000000..f9ba48308 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/checkbox/checkbox.formControl.component.ts @@ -0,0 +1,13 @@ +import {Component, Input} from "@angular/core"; +import {FormControlModel} from "../../../../models/formControlModels/formControl.model"; +import {FormGroup} from "@angular/forms"; + +@Component({ + selector: 'checkbox-form-control', + templateUrl: './checkbox.formControl.component.html' +}) +export class CheckboxFormControlComponent{ + @Input() data: FormControlModel; + @Input() form: FormGroup; + +} diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.html new file mode 100644 index 000000000..6d13e52f8 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.html @@ -0,0 +1,21 @@ +<div class="details-item" *ngIf="data != null && form != null"> + <label [ngClass]="{'required': data.isRequired()}" + for="{{data?.dataTestId}}-select">{{data?.displayName}}:</label> + <select class="form-control input-text" + id="{{data?.dataTestId}}-select" + [attr.data-tests-id]="data?.dataTestId" + name="{{data?.name}}" + [formControl]="form.controls[data.controlName]" + [ngClass]="{'error-style' : (form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors) || data?.hasEmptyOptions , + 'grayColor': form?.controls[data?.controlName]?.value == null || form?.controls[data?.controlName]?.value == undefined, + 'blackColor' : form?.controls[data?.controlName]?.value != null}" + (blur)="data.onBlur()"> + + <option [value]="null" hidden>{{data?.placeHolder}}</option> + <option *ngFor="let option of data?.options$ | orderBy : {property : 'name', direction : 1} ; let i = index" class="{{option?.id}} {{data?.dataTestId}}Option" + [value]="option[data.ngValue]" [disabled]="!option?.isPermitted && option?.isPermitted != undefined">{{option.name}} + </option> + </select> + <form-control-error *ngIf="data?.hasEmptyOptions" [message]="'No results for this request. Please change criteria.'"></form-control-error> +</div> + diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.scss b/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.scss new file mode 100644 index 000000000..9826332cc --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.scss @@ -0,0 +1,7 @@ +.grayColor { + color: gray !important; +} + +.blackColor { + color: black !important; +} diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.ts new file mode 100644 index 000000000..550feca22 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/dropdown/dropdown.formControl.component.ts @@ -0,0 +1,27 @@ +import {Component, Input, OnChanges, SimpleChanges} from "@angular/core"; +import {DropdownFormControl} from "../../../../models/formControlModels/dropdownFormControl.model"; +import {FormGroup} from "@angular/forms"; + +@Component({ + selector: 'dropdown-form-control', + templateUrl: './dropdown.formControl.component.html', + styleUrls : ['./dropdown.formControl.component.scss'] +}) +export class DropdownFormControlComponent implements OnChanges{ + @Input() data: DropdownFormControl = null; + @Input() form: FormGroup = null; + + ngOnChanges(changes: SimpleChanges): void { + if (changes["data"] !== undefined && changes["data"].currentValue !== changes["data"].previousValue && changes["data"].firstChange) { + if(this.data.onInit){ + this.data.onInit(this.data, this.form); + } + } + + if (changes["data"] !== undefined) { + this.form.controls[this.data.controlName].valueChanges.subscribe((value)=>{ + this.data.onChange(value, this.form); + }) + } + } +} diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.html new file mode 100644 index 000000000..bcbe91e5e --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.html @@ -0,0 +1,22 @@ +<div class="details-item file-form-control"> + <label [ngClass]="{'required': data.isRequired()}" for="{{data?.controlName}}">{{data?.displayName}}:</label> + <label for="{{data?.controlName}}" class="file-input-wrapper" [ngClass]="{'file-uploaded': fileUploader.files && fileUploader.files[0] || data.selectedFile != data.placeHolder}"> + <span data-tests-id="file-name" class="file-name"> + {{ fileUploader.files && fileUploader.files[0] ? fileUploader.files[0].name : data.selectedFile}} + </span> + <input id="{{data?.controlName}}" + name="{{data?.controlName}}" + class="form-control input-text" + [formControl]="form?.controls[data?.controlName]" + [ngClass]="{'error-style' : form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors}" + type="file" + #fileUploader + accept="{{data?.acceptedExtentions}}" + (change)="data?.onChange($event.target.files, form)"> + <input *ngFor="let hiddenFile of data?.hiddenFile" type="hidden" id="{{hiddenFile.controlName}}" name="{{hiddenFile.controlName}}" + [formControl]="form?.controls[hiddenFile.controlName]"/> + <span class="delete" data-tests-id="remove-uploaded-file" (click)="onDelete($event, data, form)">X</span> + <span class="icon-browse"></span> + </label> +</div> + diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.scss b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.scss new file mode 100644 index 000000000..98fae0249 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.scss @@ -0,0 +1,87 @@ +.file-form-control{ + label{ + color: #191919; + } + input[type=file] { + opacity: 0; + flex: 0; + } + .file-input-wrapper{ + display: flex; + background: #FFFFFF; + border: 1px solid #D2D2D2; + border-radius: 2px; + height: 38px; + &:hover{ + cursor: pointer; + border: 1px solid #009FDB; + .icon-browse{ + background: #E6F6FB; + border-left: 1px solid #009FDB; + &:before{ + color: #009FDB; + } + } + } + &:active{ + .icon-browse{ + background: #1EB9F3; + border-left: 1px solid #009FDB; + &:before{ + color: #ffffff; + } + } + } + .file-name { + font-family: OpenSans-Italic; + font-weight: normal; + font-size: 14px; + color: #959595; + margin: 9px; + width: 100%; + } + .icon-browse{ + z-index: 1; + margin-left: auto; + margin-bottom: 0; + cursor: pointer; + content: "\e90d"; + color: #5A5A5A; + font-size: 30px; + display: block; + text-align: center; + padding-top: 4px; + background: #F2F2F2; + border-left: 1px solid #D2D2D2; + width: 36px; + height:100%; + &:before{ + content: "\e90d"; + color: #5A5A5A; + } + } + .delete{ + visibility: hidden; + cursor: pointer; + font-size: 14px; + margin-right: 10px; + margin-top: 9px; + color: #5a5a5a; + margin-left: 10px; + z-index: 1; + &:hover{ + color: #000000; + } + } + &.file-uploaded{ + .file-name{ + font-family: OpenSans-Regular; + font-size: 14px; + color: #000000; + } + .delete{ + visibility: visible; + } + } + } +} diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.spec.ts b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.spec.ts new file mode 100644 index 000000000..e27f5115a --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.spec.ts @@ -0,0 +1,62 @@ +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core' +import {FileFormControlComponent} from "./file.formControl.component"; +import {CommonModule} from "@angular/common"; +import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms"; +import {ValidatorModel, ValidatorOptions} from "../../../../models/formControlModels/formControl.model"; +import {FormControlMessageErrorComponent} from "../../errorMessage/formControlMessageError.component"; +import {BrowserModule} from "@angular/platform-browser"; +import {TooltipModule} from "ngx-tooltip"; +import {FileFormControl} from "../../../../models/formControlModels/fileFormControl.model"; + +describe('File Form Control Component', () => { + let component: FileFormControlComponent; + let fixture: ComponentFixture<FileFormControlComponent>; + let fb: FormBuilder; + + + beforeAll(done => (async () => { + TestBed.configureTestingModule({ + imports: [CommonModule, BrowserModule, ReactiveFormsModule, TooltipModule], + providers: [FormBuilder], + declarations: [FileFormControlComponent, FormControlMessageErrorComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] + }); + await TestBed.compileComponents(); + + fixture = TestBed.createComponent(FileFormControlComponent); + component = fixture.componentInstance; + fb = TestBed.get(FormBuilder); + + })().then(done).catch(done.fail)); + + test('file component should initialize basic parameters', () => { + component.data = new FileFormControl({ + displayName: "display Name", + validations: [new ValidatorModel(ValidatorOptions.required, 'is required')], + dataTestId: "data-test-id", + placeHolder: "place holder", + controlName: 'testFile', + acceptedExtentions: "json" + }); + + component.form = fb.group({ + 'testFile': new FormControl({ + value: component.data.selectedFile, + disabled: false + }, + Validators.compose(component.data.validations.map(item => item.validator)) + ), + }); + + component.data.onDelete = function () { + component.form.controls['testFile'].setValue('onDelete'); + }; + + expect(component.form.controls['testFile'].value).toEqual("place holder"); + let event = new Event("onDelete", null); + component.data.onDelete(event, component.data, component.form); + expect(component.form.controls['testFile'].value).toEqual('onDelete'); + }) +}); + diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts new file mode 100644 index 000000000..2c2172005 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/file.formControl.component.ts @@ -0,0 +1,27 @@ +import {Component, ElementRef, Input, ViewChild} from "@angular/core"; +import {FormGroup} from "@angular/forms"; +import {FileFormControl} from "../../../../models/formControlModels/fileFormControl.model"; + +@Component({ + selector : 'file-form-control', + templateUrl : './file.formControl.component.html', + styleUrls : ['./file.formControl.component.scss'] +}) + +export class FileFormControlComponent { + @Input() data: FileFormControl = null; + @Input() form: FormGroup; + @ViewChild('fileUploader') + fileUploader:ElementRef ; + + onDelete(event, data, form) { + event.stopPropagation(); + event.preventDefault(); + form.value[data.controlName] = this.fileUploader.nativeElement.value = ""; + data.selectedFile = data.placeHolder; + if (data.onDelete){ + data.onDelete(form); + } + + } +} diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/file/fileUnit.enum.ts b/vid-webpack-master/src/app/shared/components/formControls/component/file/fileUnit.enum.ts new file mode 100644 index 000000000..d875e486c --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/file/fileUnit.enum.ts @@ -0,0 +1,7 @@ +export enum FileUnit { + b, + B, + KB, + MB, + GB +} diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.html new file mode 100644 index 000000000..90ac7c698 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.html @@ -0,0 +1,25 @@ +<div class="details-item" *ngIf="data?.isVisible"> + <label + [tooltip]="data?.tooltip ? data.tooltip : null" + id="{{data?.dataTestId}}-label" + [ngClass]="{'required' : data?.isRequired()}"> + {{data?.displayName}}: </label> + <input + #customInput + + [disabled]="data?.isDisabled ? data.isDisabled : false" + [type]="data?.inputType ? data?.inputType : 'text'" + [attr.data-tests-id]="data?.dataTestId" + class="form-control input-text" + id="{{data?.dataTestId}}" + [placeholder]="data?.placeHolder ? data?.placeHolder : ''" + [formControl]="form?.controls[data?.controlName]" + [ngClass]="{'error-style' : form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors}" + minlength="{{data?.minLength}}" + maxlength="{{data?.maxLength}}" + (blur)="data.onBlur($event, form)" + (keypress)="data?.onKeypress($event)"> +</div> + + + diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.scss b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.scss new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.scss diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.spec.ts b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.spec.ts new file mode 100644 index 000000000..84d379d1a --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.spec.ts @@ -0,0 +1,68 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core' +import {InputFormControlComponent} from "./input.formControl.component"; +import {CommonModule} from "@angular/common"; +import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms"; +import {InputFormControl} from "../../../../models/formControlModels/inputFormControl.model"; +import {ValidatorModel, ValidatorOptions} from "../../../../models/formControlModels/formControl.model"; +import {FormControlMessageErrorComponent} from "../../errorMessage/formControlMessageError.component"; +import {BrowserModule} from "@angular/platform-browser"; +import {TooltipModule} from "ngx-tooltip"; + +describe('Input Form Control Component', () => { + let component: InputFormControlComponent; + let fixture: ComponentFixture<InputFormControlComponent>; + let fb: FormBuilder; + + beforeAll(done => (async () => { + TestBed.configureTestingModule({ + imports: [CommonModule, BrowserModule, ReactiveFormsModule, TooltipModule], + providers: [FormBuilder], + declarations: [InputFormControlComponent, FormControlMessageErrorComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] + }); + await TestBed.compileComponents(); + + fixture = TestBed.createComponent(InputFormControlComponent); + component = fixture.componentInstance; + fb = TestBed.get(FormBuilder); + + })().then(done).catch(done.fail)); + + test('component should initialize basic parameters', () => { + component.data = new InputFormControl({ + value: "value", + displayName: "display Name", + validations: [new ValidatorModel(ValidatorOptions.required, 'is required')], + dataTestId: "data-test-id", + placeHolder: "place holder", + controlName: 'testInstanceName' + }); + + component.data.hasErrors = function () { + return this.formGroup.controls[this.controlName].touched && this.formGroup.controls[this.controlName].errors ? ['error-style'] : []; + }; + + component.data.onBlur = function () { + component.form.controls['testInstanceName'].setValue('onBlur'); + }; + + component.form = fb.group({ + 'testInstanceName': new FormControl({ + value: component.data.value, + disabled: false + }, Validators.compose(component.data.validations.map(item => item.validator))) + }); + + + component.form.controls['testInstanceName'].setValue('newValue'); + expect(component.form.controls['testInstanceName'].errors).toBeFalsy(); + component.form.controls['testInstanceName'].setValue(''); + expect(component.form.controls['testInstanceName'].errors.required).toBeTruthy(); + component.data.onBlur(); + expect(component.form.controls['testInstanceName'].value).toEqual('onBlur'); + expect(component.form.controls['testInstanceName'].errors).toBeFalsy(); + } + ) +}); + diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts new file mode 100644 index 000000000..1e8c28104 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts @@ -0,0 +1,18 @@ +import {Component, ElementRef, Input, ViewChild} from "@angular/core"; +import {InputFormControl} from "../../../../models/formControlModels/inputFormControl.model"; +import {FormGroup} from "@angular/forms"; + +@Component({ + selector : 'form-control-input', + templateUrl : './input.formControl.component.html', + styleUrls : ['./input.formControl.component.scss'] +}) + +export class InputFormControlComponent{ + @ViewChild('customInput') element:ElementRef; + @Input() data: InputFormControl = null; + @Input() form: FormGroup; + + + +} diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html new file mode 100644 index 000000000..f7c4894b2 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.html @@ -0,0 +1,16 @@ +<div> + <div class="details-item" *ngIf="data != null && form != null"> + <label [ngClass]="{'required': data.isRequired()}" + for="{{data?.dataTestId}}">{{data?.displayName}}:</label> + <angular2-multiselect id="{{data?.dataTestId}}" + [attr.data-tests-id]="data?.dataTestId" + [formControl]="form.controls[data.controlName]" + [(ngModel)]="data.selectedItems" + [data]="data?.options$" + [settings]="data?.settings" + title="{{data.tooltip}}" + [ngClass]="{'error-style' : form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors}"> + </angular2-multiselect> + </div> +</div> + diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.spec.ts b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.spec.ts new file mode 100644 index 000000000..81c8d4679 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.spec.ts @@ -0,0 +1,74 @@ +import {ComponentFixture, TestBed} from '@angular/core/testing'; +import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core' +import {CommonModule} from "@angular/common"; +import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms"; +import { + ValidatorModel, + ValidatorOptions +} from "../../../../models/formControlModels/formControl.model"; +import {FormControlMessageErrorComponent} from "../../errorMessage/formControlMessageError.component"; +import {BrowserModule} from "@angular/platform-browser"; +import {MultiselectFormControlComponent} from "./multiselect.formControl.component"; +import {MultiselectFormControl} from "../../../../models/formControlModels/multiselectFormControl.model"; +import { of } from "rxjs"; +describe('Dropdown Form Control Component', () => { + let component: MultiselectFormControlComponent; + let fixture: ComponentFixture<MultiselectFormControlComponent>; + let fb: FormBuilder; + + beforeAll(done => (async () => { + TestBed.configureTestingModule({ + imports: [CommonModule, BrowserModule, ReactiveFormsModule], + providers: [FormBuilder], + declarations: [MultiselectFormControlComponent, FormControlMessageErrorComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] + }); + await TestBed.compileComponents(); + + fixture = TestBed.createComponent(MultiselectFormControlComponent); + component = fixture.componentInstance; + fb = TestBed.get(FormBuilder); + + })().then(done).catch(done.fail)); + + test('component should initialize basic parameters', () => { + component.data = new MultiselectFormControl({ + displayName: "display Name", + validations: [new ValidatorModel(ValidatorOptions.required, 'is required')], + dataTestId: "data-test-id", + placeHolder: "place holder", + controlName: 'testDropdown', + options: of([ + 'option1', + 'option2', + 'option3', + 'onBlur' + ]) + }); + + component.data.hasErrors = function () { + return this.formGroup.controls[this.controlName].touched && this.formGroup.controls[this.controlName].errors ? ['error-style'] : []; + }; + + component.data.onBlur = function () { + component.form.controls['testDropdown'].setValue('onBlur'); + }; + + component.form = fb.group({ + 'testDropdown': new FormControl({ + value: component.data.value, + disabled: false + }, Validators.compose(component.data.validations.map(item => item.validator))) + }); + + component.form.controls['testDropdown'].setValue(''); + expect(component.form.controls['testDropdown'].errors.required).toBeTruthy(); + component.form.controls['testDropdown'].setValue('option2'); + expect(component.form.controls['testDropdown'].errors).toBeFalsy(); + component.data.onBlur(); + expect(component.form.controls['testDropdown'].value).toEqual('onBlur'); + expect(component.form.controls['testDropdown'].errors).toBeFalsy(); + } + ) +}); + diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts new file mode 100644 index 000000000..4b98c7e26 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/multiselect/multiselect.formControl.component.ts @@ -0,0 +1,20 @@ +import {Component, Input, OnChanges, SimpleChanges} from "@angular/core"; +import {FormGroup} from "@angular/forms"; +import {MultiselectFormControl} from "../../../../models/formControlModels/multiselectFormControl.model"; + +@Component({ + selector: 'multiselect-form-control', + templateUrl: './multiselect.formControl.component.html' +}) +export class MultiselectFormControlComponent implements OnChanges{ + @Input() data: MultiselectFormControl = null; + @Input() form: FormGroup = null; + + ngOnChanges(changes: SimpleChanges): void { + if (changes["data"] !== undefined && changes["data"].currentValue !== changes["data"].previousValue && changes["data"].firstChange) { + if(this.data.onInit){ + this.data.onInit(this.data, this.form); + } + } + } +} diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.html new file mode 100644 index 000000000..3763764d5 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.html @@ -0,0 +1,13 @@ +<div> + <div class="details-item" *ngIf="data != null && form != null"> + <label [ngClass]="{'required': data.isRequired()}" + for="{{data?.dataTestId}}">{{data?.displayName}}:</label> + <input id="{{data?.dataTestId}}" [attr.data-tests-id]="data?.dataTestId" + name="{{data?.controlName}}" class="form-control input-text" + [formControl]="form.controls[data.controlName]" type="number" + placeholder="{{data?.placeHolder}}" title="{{data?.tooltip}}" + [ngClass]="{'error-style' : form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors}" + min="{{data?.min}}" max="{{data?.max}}"> + </div> +</div> + diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.ts new file mode 100644 index 000000000..bd25ded81 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/number/number.formControl.component.ts @@ -0,0 +1,12 @@ +import {Component, Input} from "@angular/core"; +import {FormGroup} from "@angular/forms"; +import {NumberFormControl} from "../../../../models/formControlModels/numberFormControl.model"; + +@Component({ + selector: 'number-form-control', + templateUrl: './number.formControl.component.html' +}) +export class NumberFormControlComponent { + @Input() data: NumberFormControl = null; + @Input() form: FormGroup = null; +} |