diff --git a/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.ts index e669f1e0c6..fc44a35eda 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/device/coap-device-profile-transport-configuration.component.ts @@ -15,7 +15,17 @@ /// import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'; -import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; +import { + ControlValueAccessor, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + UntypedFormBuilder, + UntypedFormControl, + UntypedFormGroup, + ValidationErrors, + Validator, + Validators +} from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@app/core/core.state'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; @@ -27,7 +37,6 @@ import { defaultRpcRequestSchema, defaultRpcResponseSchema, defaultTelemetrySchema, - DeviceProfileTransportConfiguration, DeviceTransportType, TransportPayloadType, transportPayloadTypeTranslationMap, @@ -41,13 +50,20 @@ import { PowerMode } from '@home/components/profile/device/lwm2m/lwm2m-profile-c selector: 'tb-coap-device-profile-transport-configuration', templateUrl: './coap-device-profile-transport-configuration.component.html', styleUrls: ['./coap-device-profile-transport-configuration.component.scss'], - providers: [{ - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => CoapDeviceProfileTransportConfigurationComponent), - multi: true - }] + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => CoapDeviceProfileTransportConfigurationComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => CoapDeviceProfileTransportConfigurationComponent), + multi: true + } + ] }) -export class CoapDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy { +export class CoapDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy, Validator { coapTransportDeviceTypes = Object.values(CoapTransportDeviceType); coapTransportDeviceTypeTranslations = coapDeviceTypeTranslationMap; @@ -178,12 +194,15 @@ export class CoapDeviceProfileTransportConfigurationComponent implements Control } } + public validate(c: UntypedFormControl): ValidationErrors | null { + return (this.coapTransportConfigurationFormGroup.valid) ? null : { + valid: false, + }; + } + private updateModel() { - let configuration: DeviceProfileTransportConfiguration = null; - if (this.coapTransportConfigurationFormGroup.valid) { - configuration = this.coapTransportConfigurationFormGroup.value; - configuration.type = DeviceTransportType.COAP; - } + const configuration = this.coapTransportConfigurationFormGroup.value; + configuration.type = DeviceTransportType.COAP; this.propagateChange(configuration); } } diff --git a/ui-ngx/src/app/modules/home/components/profile/device/device-profile-transport-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/device/device-profile-transport-configuration.component.ts index ff2c961ca6..7d1ab27ebd 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/device-profile-transport-configuration.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/device/device-profile-transport-configuration.component.ts @@ -15,7 +15,17 @@ /// import { Component, forwardRef, Input, OnInit } from '@angular/core'; -import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; +import { + ControlValueAccessor, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, + UntypedFormBuilder, + UntypedFormControl, + UntypedFormGroup, + ValidationErrors, + Validator, + Validators +} from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@app/core/core.state'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; @@ -26,13 +36,20 @@ import { deepClone } from '@core/utils'; selector: 'tb-device-profile-transport-configuration', templateUrl: './device-profile-transport-configuration.component.html', styleUrls: [], - providers: [{ - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => DeviceProfileTransportConfigurationComponent), - multi: true - }] + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => DeviceProfileTransportConfigurationComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => DeviceProfileTransportConfigurationComponent), + multi: true, + } + ] }) -export class DeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit { +export class DeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, Validator { deviceTransportType = DeviceTransportType; @@ -98,11 +115,16 @@ export class DeviceProfileTransportConfigurationComponent implements ControlValu } private updateModel() { - let configuration: DeviceProfileTransportConfiguration = null; - if (this.deviceProfileTransportConfigurationFormGroup.valid) { - configuration = this.deviceProfileTransportConfigurationFormGroup.getRawValue().configuration; - configuration.type = this.transportType; - } + const configuration = this.deviceProfileTransportConfigurationFormGroup.getRawValue().configuration; + configuration.type = this.transportType; this.propagateChange(configuration); } + + public validate(c: UntypedFormControl): ValidationErrors | null { + return (this.deviceProfileTransportConfigurationFormGroup.valid) ? null : { + configuration: { + valid: false, + }, + }; + } } diff --git a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.ts index fbc72d9498..a6f6e3a467 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/device/lwm2m/lwm2m-device-profile-transport-configuration.component.ts @@ -296,11 +296,7 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro } private updateModel = (): void => { - let configuration: Lwm2mProfileConfigModels = null; - if (this.lwm2mDeviceProfileFormGroup.valid) { - configuration = this.configurationValue; - } - this.propagateChange(configuration); + this.propagateChange(this.configurationValue); } private updateObserveAttrTelemetryObjectFormGroup = (objectsList: ObjectLwM2M[]): void => { diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts index f11bf622fb..1566904258 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts @@ -17,10 +17,13 @@ import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'; import { ControlValueAccessor, + NG_VALIDATORS, + NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, - NG_VALUE_ACCESSOR, + ValidationErrors, + Validator, ValidatorFn, Validators } from '@angular/forms'; @@ -32,7 +35,6 @@ import { defaultRpcRequestSchema, defaultRpcResponseSchema, defaultTelemetrySchema, - DeviceProfileTransportConfiguration, DeviceTransportType, MqttDeviceProfileTransportConfiguration, TransportPayloadType, @@ -46,13 +48,20 @@ import { takeUntil } from 'rxjs/operators'; selector: 'tb-mqtt-device-profile-transport-configuration', templateUrl: './mqtt-device-profile-transport-configuration.component.html', styleUrls: ['./mqtt-device-profile-transport-configuration.component.scss'], - providers: [{ - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => MqttDeviceProfileTransportConfigurationComponent), - multi: true - }] + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => MqttDeviceProfileTransportConfigurationComponent), + multi: true + }, + { + provide: NG_VALIDATORS, + useExisting: forwardRef(() => MqttDeviceProfileTransportConfigurationComponent), + multi: true + } + ] }) -export class MqttDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy { +export class MqttDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy, Validator { transportPayloadTypes = Object.keys(TransportPayloadType); @@ -172,12 +181,15 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control } } + public validate(c: UntypedFormControl): ValidationErrors | null { + return (this.mqttDeviceProfileTransportConfigurationFormGroup.valid) ? null : { + valid: false, + }; + } + private updateModel() { - let configuration: DeviceProfileTransportConfiguration = null; - if (this.mqttDeviceProfileTransportConfigurationFormGroup.valid) { - configuration = this.mqttDeviceProfileTransportConfigurationFormGroup.getRawValue(); - configuration.type = DeviceTransportType.MQTT; - } + const configuration = this.mqttDeviceProfileTransportConfigurationFormGroup.getRawValue(); + configuration.type = DeviceTransportType.MQTT; this.propagateChange(configuration); } diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.ts index 413c6da878..f81422943a 100644 --- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.ts +++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-transport-configuration.component.ts @@ -27,7 +27,6 @@ import { } from '@angular/forms'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; import { - DeviceProfileTransportConfiguration, DeviceTransportType, SnmpDeviceProfileTransportConfiguration } from '@shared/models/device.models'; @@ -125,11 +124,8 @@ export class SnmpDeviceProfileTransportConfigurationComponent implements OnInit, } private updateModel() { - let configuration: DeviceProfileTransportConfiguration = null; - if (this.snmpDeviceProfileTransportConfigurationFormGroup.valid) { - configuration = this.snmpDeviceProfileTransportConfigurationFormGroup.getRawValue(); - configuration.type = DeviceTransportType.SNMP; - } + const configuration = this.snmpDeviceProfileTransportConfigurationFormGroup.getRawValue(); + configuration.type = DeviceTransportType.SNMP; this.propagateChange(configuration); }