Merge pull request #3579 from vvlladd28/improvement/device-credential

UI: Refactoring show error in device-credentials

@@ -70,8 +70,8 @@
         <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
         <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
       </button>
       </button>
     </mat-form-field>
     </mat-form-field>
-    <mat-error *ngIf="deviceCredentialsFormGroup.get('credentialsBasic').hasError('atLeastOne')">
-      {{ 'device.client-id-or-user-name-necessary' | translate }}
-    </mat-error>
+    <tb-error style="margin-top: -12px; display: block;"
+      [error]="deviceCredentialsFormGroup.get('credentialsBasic').hasError('atLeastOne') ?
+              ('device.client-id-or-user-name-necessary' | translate) : ''"></tb-error>
   </section>
   </section>
 </section>
 </section>

@@ -174,8 +174,8 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
 
 
   updateValidators(): void {
   updateValidators(): void {
     this.hidePassword = true;
     this.hidePassword = true;
-    const crendetialsType = this.deviceCredentialsFormGroup.get('credentialsType').value as DeviceCredentialsType;
-    switch (crendetialsType) {
+    const credentialsType = this.deviceCredentialsFormGroup.get('credentialsType').value as DeviceCredentialsType;
+    switch (credentialsType) {
       case DeviceCredentialsType.ACCESS_TOKEN:
       case DeviceCredentialsType.ACCESS_TOKEN:
         this.deviceCredentialsFormGroup.get('credentialsId').setValidators([Validators.required, Validators.pattern(/^.{1,20}$/)]);
         this.deviceCredentialsFormGroup.get('credentialsId').setValidators([Validators.required, Validators.pattern(/^.{1,20}$/)]);
         this.deviceCredentialsFormGroup.get('credentialsId').updateValueAndValidity({emitEvent: false});
         this.deviceCredentialsFormGroup.get('credentialsId').updateValueAndValidity({emitEvent: false});
@@ -215,9 +215,6 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
     const value = this.deviceCredentialsFormGroup.get('credentialsBasic.password').value;
     const value = this.deviceCredentialsFormGroup.get('credentialsBasic.password').value;
     if (value !== '') {
     if (value !== '') {
       this.deviceCredentialsFormGroup.get('credentialsBasic.userName').setValidators([Validators.required]);
       this.deviceCredentialsFormGroup.get('credentialsBasic.userName').setValidators([Validators.required]);
-      if (this.deviceCredentialsFormGroup.get('credentialsBasic.userName').untouched) {
-        this.deviceCredentialsFormGroup.get('credentialsBasic.userName').markAsTouched({onlySelf: true});
-      }
     } else {
     } else {
       this.deviceCredentialsFormGroup.get('credentialsBasic.userName').setValidators([]);
       this.deviceCredentialsFormGroup.get('credentialsBasic.userName').setValidators([]);
     }
     }