diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/form-components')
9 files changed, 28 insertions, 38 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html index c6b8384183..805e5ac295 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html +++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.html @@ -1,3 +1,3 @@ -<select name='{{name}}' [(ngModel)]="value" (change)="onSave()" [ngClass]="{'disabled':readonly}" data-tests-id="SelectType"> +<select name='{{name}}' [(ngModel)]="value" (change)="onChange()" [ngClass]="{'disabled':readonly}" data-tests-id="SelectType"> <option *ngFor="let ddvalue of values" [ngValue]="ddvalue.label != undefined ? ddvalue.value : ddvalue">{{ddvalue.label||ddvalue}}</option> </select> diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts index 5abf32c61b..03a1fc6040 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component.ts @@ -43,9 +43,4 @@ export class UiElementDropDownComponent extends UiElementBase implements UiEleme constructor() { super(); } - - onSave() { - this.baseEmitter.emit(this.value); - } - } diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html index b7d7c859c7..057e731ada 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html +++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.html @@ -4,7 +4,7 @@ type="text" [name]="name" [(ngModel)]="value" - (change)="onSave()" + (input)="onChange()" [attr.maxlength]="validation.propertyValue.max" [attr.minlength]="validation.propertyValue.min" [pattern]="pattern" diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts index fb3b3db859..ce231e76e8 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/form-components/input/ui-element-input.component.ts @@ -32,10 +32,4 @@ export class UiElementInputComponent extends UiElementBase implements UiElementB super(); this.pattern = this.validation.validationPatterns.comment; } - - onSave() { - if (!this.control.invalid){ - this.baseEmitter.emit(this.value); - } - } } diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html index 9fbc9e1094..e1555e87fd 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.html @@ -4,7 +4,7 @@ type="text" [name]="name" [(ngModel)]="value" - (change)="onSave()" + (input)="onChange()" [attr.maxlength]="validation.propertyValue.max" [attr.minlength]="validation.propertyValue.min" [pattern]="pattern" diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts index 1667f4393d..9aa4b5872c 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/form-components/integer-input/ui-element-integer-input.component.ts @@ -33,9 +33,8 @@ export class UiElementIntegerInputComponent extends UiElementBase implements UiE //this.pattern = this.validation.validationPatterns.comment; } - onSave() { - if (!this.control.invalid){ - this.baseEmitter.emit(this.value ? JSON.parse(this.value) : this.value); - } + onChange() { + this.value = this.control.valid && this.value ? JSON.parse(this.value) : this.value; + super.onChange(); } } diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts index 61688df3f0..525cd1742c 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/form-components/popover-input/ui-element-popover-input.component.ts @@ -35,17 +35,10 @@ export class UiElementPopoverInputComponent extends UiElementBase implements UiE saveButton: ButtonModel; buttonsArray: ButtonsModelMap; - onSave = ():void => { - if (!this.control.invalid){ - this.baseEmitter.emit(this.value); - this.popoverContentComponent.hide(); - } - } - constructor() { super(); // Create Save button and insert to buttons map - this.saveButton = new ButtonModel('save', 'blue', this.onSave); + this.saveButton = new ButtonModel('save', 'blue', this.onChange); this.buttonsArray = { 'test': this.saveButton }; // Define the regex pattern for this controller diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts index 0f80e2ad44..3e8c3b5813 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/form-components/radio-buttons/radio-buttons.component.ts @@ -12,10 +12,6 @@ import {UiElementBaseInterface, UiElementBase} from "../ui-element-base.componen }) export class RadioButtonComponent extends UiElementBase implements UiElementBaseInterface { - onSave() { - this.baseEmitter.emit(this.value); - } - @Input() options:Array<RadioButtonModel>; @Input() readonly:boolean; @Input() direction:string = 'vertical'; //get 'horizontal' | 'vertical' @@ -23,7 +19,7 @@ export class RadioButtonComponent extends UiElementBase implements UiElementBas select(value:any) { this.value = value; - this.baseEmitter.emit(this.value); + this.onChange(); } } diff --git a/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts index ae2013ff70..b4e9e7d36a 100644 --- a/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts +++ b/catalog-ui/src/app/ng2/components/ui/form-components/ui-element-base.component.ts @@ -23,7 +23,12 @@ import { ValidationConfiguration } from "app/models"; import { FormControl, Validators } from '@angular/forms'; export interface UiElementBaseInterface { - onSave(); + onChange(); +} + +export interface IUiElementChangeEvent { + value: any; + isValid: boolean; } @Component({ @@ -35,21 +40,29 @@ export class UiElementBase { protected validation = ValidationConfiguration.validation; protected control: FormControl; - // Two way binding for value (need to write the "Change" word like this) - @Output('valueChange') baseEmitter: EventEmitter<string> = new EventEmitter<any>(); - @Input('value') set setValueValue(value) { - this.value = value; - } + @Input() value: any; + @Output() valueChange: EventEmitter<any> = new EventEmitter<any>(); + @Output('elementChanged') baseEmitter: EventEmitter<IUiElementChangeEvent> = new EventEmitter<IUiElementChangeEvent>(); @Input() name: string; @Input() type: string; - @Input() value: any; @Input() pattern: any; @Input() readonly:boolean; constructor() { //this.control = new FormControl('', [Validators.required]); this.control = new FormControl('', []); + + this.baseEmitter.subscribe((changeEvent: IUiElementChangeEvent) => { + this.valueChange.emit(changeEvent.value); + }) + } + + onChange() { + this.baseEmitter.emit({ + value: this.value, + isValid: this.control.valid + }); } } |