Merge pull request #11035 from rusikv/bug/device-profile-transport-configuration

Fixed disappearing of device profile transport config form on tab switch if it is invalid

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: [{
+  providers: [
-    provide: NG_VALUE_ACCESSOR,
+    {
-    useExisting: forwardRef(() => CoapDeviceProfileTransportConfigurationComponent),
+      provide: NG_VALUE_ACCESSOR,
-    multi: true
+      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;
+    const configuration = this.coapTransportConfigurationFormGroup.value;
-    if (this.coapTransportConfigurationFormGroup.valid) {
+    configuration.type = DeviceTransportType.COAP;
-      configuration = this.coapTransportConfigurationFormGroup.value;
-      configuration.type = DeviceTransportType.COAP;
-    }
     this.propagateChange(configuration);
   }
 }

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: [{
+  providers: [
-    provide: NG_VALUE_ACCESSOR,
+    {
-    useExisting: forwardRef(() => DeviceProfileTransportConfigurationComponent),
+      provide: NG_VALUE_ACCESSOR,
-    multi: true
+      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;
+    const configuration = this.deviceProfileTransportConfigurationFormGroup.getRawValue().configuration;
-    if (this.deviceProfileTransportConfigurationFormGroup.valid) {
+    configuration.type = this.transportType;
-      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,
+      },
+    };
+  }
 }

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;
+    this.propagateChange(this.configurationValue);
-    if (this.lwm2mDeviceProfileFormGroup.valid) {
-      configuration = this.configurationValue;
-    }
-    this.propagateChange(configuration);
   }
 
   private updateObserveAttrTelemetryObjectFormGroup = (objectsList: ObjectLwM2M[]): void => {

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: [{
+  providers: [
-    provide: NG_VALUE_ACCESSOR,
+    {
-    useExisting: forwardRef(() => MqttDeviceProfileTransportConfigurationComponent),
+      provide: NG_VALUE_ACCESSOR,
-    multi: true
+      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;
+    const configuration = this.mqttDeviceProfileTransportConfigurationFormGroup.getRawValue();
-    if (this.mqttDeviceProfileTransportConfigurationFormGroup.valid) {
+    configuration.type = DeviceTransportType.MQTT;
-      configuration = this.mqttDeviceProfileTransportConfigurationFormGroup.getRawValue();
-      configuration.type = DeviceTransportType.MQTT;
-    }
     this.propagateChange(configuration);
   }
 

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;
+    const configuration = this.snmpDeviceProfileTransportConfigurationFormGroup.getRawValue();
-    if (this.snmpDeviceProfileTransportConfigurationFormGroup.valid) {
+    configuration.type = DeviceTransportType.SNMP;
-      configuration = this.snmpDeviceProfileTransportConfigurationFormGroup.getRawValue();
-      configuration.type = DeviceTransportType.SNMP;
-    }
     this.propagateChange(configuration);
   }