diff --git a/kouncil-frontend/libs/common-components/src/lib/text-field/text-field.component.ts b/kouncil-frontend/libs/common-components/src/lib/text-field/text-field.component.ts index 0d26ae16..ed00bdd0 100644 --- a/kouncil-frontend/libs/common-components/src/lib/text-field/text-field.component.ts +++ b/kouncil-frontend/libs/common-components/src/lib/text-field/text-field.component.ts @@ -21,8 +21,8 @@ import {FormGroup, NG_VALUE_ACCESSOR} from '@angular/forms'; Field value is not unique - - Field value is not correct + + Field value is incorrect diff --git a/kouncil-frontend/libs/feat-clusters/src/lib/cluster-form/sections/cluster-form-brokers/cluster-form-brokers.component.scss b/kouncil-frontend/libs/feat-clusters/src/lib/cluster-form/sections/cluster-form-brokers/cluster-form-brokers.component.scss index db59b6a6..631a9f42 100644 --- a/kouncil-frontend/libs/feat-clusters/src/lib/cluster-form/sections/cluster-form-brokers/cluster-form-brokers.component.scss +++ b/kouncil-frontend/libs/feat-clusters/src/lib/cluster-form/sections/cluster-form-brokers/cluster-form-brokers.component.scss @@ -26,7 +26,11 @@ display: inline-flex; width: 100%; gap: $space-5; - align-items: end; + } + + .broker-remove-btn { + display: block; + padding-top: 36px; } } diff --git a/kouncil-frontend/libs/feat-clusters/src/lib/cluster-form/sections/cluster-form-brokers/cluster-form-brokers.component.ts b/kouncil-frontend/libs/feat-clusters/src/lib/cluster-form/sections/cluster-form-brokers/cluster-form-brokers.component.ts index d67e9e1f..86b0108d 100644 --- a/kouncil-frontend/libs/feat-clusters/src/lib/cluster-form/sections/cluster-form-brokers/cluster-form-brokers.component.ts +++ b/kouncil-frontend/libs/feat-clusters/src/lib/cluster-form/sections/cluster-form-brokers/cluster-form-brokers.component.ts @@ -1,5 +1,13 @@ import {Component, Input} from '@angular/core'; -import {FormArray, FormControl, FormGroup, Validators} from '@angular/forms'; +import { + AbstractControl, + FormArray, + FormControl, + FormGroup, + ValidationErrors, + ValidatorFn, + Validators +} from '@angular/forms'; import {ClusterBroker, ClusterMetadata} from '../../../cluster.model'; import {ViewMode} from '@app/common-utils'; @@ -44,12 +52,14 @@ import {ViewMode} from '@app/common-utils'; [form]="brokerForm" [controlName]="'jmxPassword'"> - +
+ +
@@ -71,7 +81,7 @@ export class ClusterFormBrokersComponent { addBroker(broker?: ClusterBroker): void { this.brokers.push(new FormGroup({ id: new FormControl(broker ? broker.id : ''), - bootstrapServer: new FormControl(broker ? broker.bootstrapServer : '', [Validators.required]), + bootstrapServer: new FormControl(broker ? broker.bootstrapServer : '', [Validators.required, this.isCorrectValue()]), jmxUser: new FormControl(broker ? broker.jmxUser : ''), jmxPassword: new FormControl(broker ? broker.jmxPassword : ''), jmxPort: new FormControl(broker ? broker.jmxPort : '') @@ -89,4 +99,11 @@ export class ClusterFormBrokersComponent { get brokers(): FormArray { return this.clusterForm.get('brokers') as FormArray; } + + private isCorrectValue(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const regExp: RegExp = /.*:[0-9]+/; + return control.value && !regExp.test(control.value) ? {incorrectValue: true} : null; + }; + } }