diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html index 17f5185bc6..105a3c0e8e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.html @@ -23,6 +23,16 @@ +
+
{{ 'gateway.hints.modbus-server' | translate }}
+
+ + + {{ 'gateway.enable' | translate }} + + +
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts index 22430ae77c..8291558b4d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts @@ -18,10 +18,10 @@ import { ChangeDetectionStrategy, Component, forwardRef, Input, OnDestroy, Templ import { ControlValueAccessor, FormBuilder, + FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, - UntypedFormControl, ValidationErrors, Validator, } from '@angular/forms'; @@ -68,6 +68,7 @@ export class ModbusBasicConfigComponent implements ControlValueAccessor, Validat @Input() generalTabContent: TemplateRef; basicFormGroup: FormGroup; + enableSlaveControl: FormControl; onChange: (value: ModbusBasicConfig) => void; onTouched: () => void; @@ -79,6 +80,7 @@ export class ModbusBasicConfigComponent implements ControlValueAccessor, Validat master: [], slave: [], }); + this.enableSlaveControl = new FormControl(false); this.basicFormGroup.valueChanges .pipe(takeUntil(this.destroy$)) @@ -86,6 +88,14 @@ export class ModbusBasicConfigComponent implements ControlValueAccessor, Validat this.onChange(value); this.onTouched(); }); + + this.enableSlaveControl.valueChanges + .pipe(takeUntil(this.destroy$)) + .subscribe(enable => { + this.updateSlaveEnabling(enable); + this.basicFormGroup.get('slave').updateValueAndValidity({emitEvent: !!this.onChange}); + this.basicFormGroup.get('master').updateValueAndValidity({emitEvent: !!this.onChange}); + }); } ngOnDestroy(): void { @@ -108,16 +118,20 @@ export class ModbusBasicConfigComponent implements ControlValueAccessor, Validat }; this.basicFormGroup.setValue(editedBase, {emitEvent: false}); + this.enableSlaveControl.setValue(!!basicConfig.slave && !isEqual(basicConfig.slave, {})); + } + + validate(): ValidationErrors | null { + return this.basicFormGroup.valid ? null : { + basicFormGroup: {valid: false} + }; } - validate(basicFormControl: UntypedFormControl): ValidationErrors | null { - const { master, slave } = basicFormControl.value; - const isEmpty = !master?.slaves?.length && (isEqual(slave, {}) || !slave); - if (!this.basicFormGroup.valid || isEmpty) { - return { - basicFormGroup: {valid: false} - }; + private updateSlaveEnabling(isEnabled: boolean): void { + if (isEnabled) { + this.basicFormGroup.get('slave').enable({emitEvent: false}); + } else { + this.basicFormGroup.get('slave').disable({emitEvent: false}); } - return null; } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts index 75fc62ed5e..5f51f59284 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-master-table/modbus-master-table.component.ts @@ -34,8 +34,12 @@ import { ControlValueAccessor, FormArray, FormBuilder, + NG_VALIDATORS, NG_VALUE_ACCESSOR, + UntypedFormControl, UntypedFormGroup, + ValidationErrors, + Validator, } from '@angular/forms'; import { ModbusMasterConfig, @@ -59,11 +63,16 @@ import { TbTableDatasource } from '@shared/components/table/table-datasource.abs useExisting: forwardRef(() => ModbusMasterTableComponent), multi: true }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => ModbusMasterTableComponent), + multi: true + } ], standalone: true, imports: [CommonModule, SharedModule] }) -export class ModbusMasterTableComponent implements ControlValueAccessor, AfterViewInit, OnInit, OnDestroy { +export class ModbusMasterTableComponent implements ControlValueAccessor, Validator, AfterViewInit, OnInit, OnDestroy { @ViewChild('searchInput') searchInputField: ElementRef; @@ -130,6 +139,12 @@ export class ModbusMasterTableComponent implements ControlValueAccessor, AfterVi this.pushDataAsFormArrays(master.slaves); } + validate(masterControl: UntypedFormControl): ValidationErrors | null { + return masterControl.parent.get('slave').enabled || this.slaves.controls.length ? null : { + slavesFormGroup: {valid: false} + }; + } + enterFilterMode(): void { this.textSearchMode = true; this.cdr.detectChanges(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html index c4986eefce..a46dd68edc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html @@ -16,16 +16,6 @@ -->
-
-
{{ 'gateway.hints.modbus-server' | translate }}
-
- - - {{ 'gateway.enable' | translate }} - - -
-
gateway.server-slave-config
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts index 86b601de53..46771c6937 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts @@ -77,7 +77,6 @@ import { isEqual } from '@core/utils'; export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validator, OnDestroy { slaveConfigFormGroup: UntypedFormGroup; - enableSlaveControl: FormControl; showSecurityControl: FormControl; ModbusProtocolLabelsMap = ModbusProtocolLabelsMap; ModbusMethodLabelsMap = ModbusMethodLabelsMap; @@ -90,6 +89,7 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat readonly ModbusProtocolType = ModbusProtocolType; readonly modbusBaudrates = ModbusBaudrates; + private isSlaveEnabled = false; private readonly serialSpecificControlKeys = ['serialPort', 'baudrate']; private readonly tcpUdpSpecificControlKeys = ['port', 'security', 'host']; @@ -100,7 +100,6 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat constructor(private fb: FormBuilder) { this.showSecurityControl = this.fb.control(false); - this.enableSlaveControl = this.fb.control(false); this.slaveConfigFormGroup = this.fb.group({ type: [ModbusProtocolType.TCP], host: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]], @@ -128,7 +127,6 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat this.observeValueChanges(); this.observeTypeChange(); this.observeShowSecurity(); - this.observeFormEnable(); } get protocolType(): ModbusProtocolType { @@ -155,11 +153,15 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat } writeValue(slaveConfig: ModbusSlave): void { - this.enableSlaveControl.patchValue(!!slaveConfig && !isEqual(slaveConfig, {})); this.showSecurityControl.patchValue(!!slaveConfig.security && !isEqual(slaveConfig.security, {})); this.updateSlaveConfig(slaveConfig); } + setDisabledState(isDisabled: boolean): void { + this.isSlaveEnabled = !isDisabled; + this.updateFormEnableState(); + } + private observeValueChanges(): void { this.slaveConfigFormGroup.valueChanges.pipe( takeUntil(this.destroy$) @@ -173,20 +175,11 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat }); } - private observeFormEnable(): void { - this.enableSlaveControl.valueChanges - .pipe(takeUntil(this.destroy$)) - .subscribe(value => { - this.updateFormEnableState(value); - this.slaveConfigFormGroup.updateValueAndValidity({emitEvent: !!this.onChange}); - }); - } - private observeTypeChange(): void { this.slaveConfigFormGroup.get('type').valueChanges .pipe(takeUntil(this.destroy$)) .subscribe(type => { - this.updateFormEnableState(this.enableSlaveControl.value); + this.updateFormEnableState(); this.updateMethodType(type); }); } @@ -202,8 +195,8 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat } } - private updateFormEnableState(enabled: boolean): void { - if (enabled) { + private updateFormEnableState(): void { + if (this.isSlaveEnabled) { this.slaveConfigFormGroup.enable({emitEvent: false}); this.showSecurityControl.enable({emitEvent: false}); } else { @@ -221,7 +214,7 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat } private updateSecurityEnable(securityEnabled: boolean): void { - if (securityEnabled && this.enableSlaveControl.value && this.protocolType !== ModbusProtocolType.Serial) { + if (securityEnabled && this.isSlaveEnabled && this.protocolType !== ModbusProtocolType.Serial) { this.slaveConfigFormGroup.get('security').enable({emitEvent: false}); } else { this.slaveConfigFormGroup.get('security').disable({emitEvent: false}); @@ -233,7 +226,7 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat const enableKeys = isSerial ? this.serialSpecificControlKeys : this.tcpUdpSpecificControlKeys; const disableKeys = isSerial ? this.tcpUdpSpecificControlKeys : this.serialSpecificControlKeys; - if (this.enableSlaveControl.value) { + if (this.isSlaveEnabled) { enableKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.enable({ emitEvent: false })); }