Bug #15468 [Profile Groups] – The “Next” button becomes clickable before the name is validated.

Author: Salim Terres

ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.html

@@ -7,14 +7,15 @@
   ]"
 ></vitamui-dialog-header>
 
-<form [formGroup]="externalParamProfileForm" (ngSubmit)="onSubmit()">
+<form [formGroup]="form" (ngSubmit)="onSubmit()">
   <vitamui-stepper #stepper>
     <cdk-step>
       <mat-dialog-content class="gap-3 align-items-stretch">
-        <vitamui-slide-toggle formControlName="enabled"
-          >{{ 'EXTERNAL_PARAM_PROFILE.PROFILE' | translate }} <span *ngIf="!externalParamProfileForm.get('enabled').value">in</span
-          >{{ 'COMMON.ACTIVE' | translate }}</vitamui-slide-toggle
-        >
+        <vitamui-slide-toggle formControlName="enabled">
+          {{ 'EXTERNAL_PARAM_PROFILE.PROFILE' | translate }}
+          <span *ngIf="!form.controls.enabled.value">in</span>
+          {{ 'COMMON.ACTIVE' | translate }}
+        </vitamui-slide-toggle>
 
         <vitamui-input
           formControlName="name"
@@ -51,7 +52,7 @@
           {{ 'EXTERNAL_PARAM_PROFILE.USE_PLATFORM_BULK_OPERATIONS_THRESHOLD_TITLE' | translate }}
         </vitamui-slide-toggle>
 
-        <div class="select-threshold" *ngIf="!externalParamProfileForm.get('usePlatformThreshold').value">
+        <div class="select-threshold" *ngIf="!form.controls.usePlatformThreshold.value">
           <vitamui-select
             class="w-100"
             formControlName="bulkOperationsThreshold"
@@ -71,7 +72,7 @@
 
       <mat-dialog-actions>
         <div>
-          <button type="submit" class="btn primary" [disabled]="onValidate()">
+          <button type="submit" class="btn primary" [disabled]="isFormInvalid()">
             {{ 'COMMON.SUBMIT' | translate }}
           </button>
           <button type="button" class="btn link cancel" (click)="onCancel()">

ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-create/external-param-profile-create.component.ts

@@ -38,7 +38,7 @@ import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Observable, Subscription } from 'rxjs';
-import { ApplicationId, ConfirmDialogService, ExternalParamProfile, Option } from 'vitamui-library';
+import { ConfirmDialogService, ExternalParamProfile, Option } from 'vitamui-library';
 import { ExternalParamProfileService } from '../external-param-profile.service';
 import { ExternalParamProfileValidators } from '../external-param-profile.validators';
 import { map } from 'rxjs/operators';
@@ -52,7 +52,7 @@ import { DecimalPipe } from '@angular/common';
   standalone: false,
 })
 export class ExternalParamProfileCreateComponent implements OnInit, OnDestroy {
-  externalParamProfileForm: FormGroup;
+  form: FormGroup;
   activeAccessContractsIdentifiers$: Observable<string[]>;
   private keyPressSubscription: Subscription;
   tenantIdentifier: string;
@@ -91,25 +91,25 @@ export class ExternalParamProfileCreateComponent implements OnInit, OnDestroy {
   }
 
   private initForm(tenantIdentifier: string) {
-    this.externalParamProfileForm = this.formBuilder.group({
+    this.form = this.formBuilder.group({
       enabled: true,
       accessContract: [null, Validators.required],
       description: [null, [Validators.required, Validators.minLength(2), Validators.maxLength(250)]],
-      name: [null, [Validators.required, Validators.minLength(2), Validators.maxLength(100)]],
+      name: [
+        null,
+        [Validators.required, Validators.minLength(2), Validators.maxLength(100)],
+        [this.externalParamProfileValidators.nameExists(+tenantIdentifier)],
+      ],
       usePlatformThreshold: true,
       bulkOperationsThreshold: [null, []],
     });
-
-    this.externalParamProfileForm
-      .get('name')
-      .setAsyncValidators(this.externalParamProfileValidators.nameExists(+tenantIdentifier, ApplicationId.EXTERNAL_PARAM_PROFILE_APP));
   }
 
   onSubmit() {
-    if (this.externalParamProfileForm.invalid) {
+    if (this.form.invalid) {
       return;
     }
-    const externalParamProfile: ExternalParamProfile = this.externalParamProfileForm.getRawValue();
+    const externalParamProfile: ExternalParamProfile = this.form.getRawValue();
     if (externalParamProfile.usePlatformThreshold) {
       externalParamProfile.bulkOperationsThreshold = null;
     }
@@ -126,22 +126,22 @@ export class ExternalParamProfileCreateComponent implements OnInit, OnDestroy {
   }
 
   onCancel() {
-    if (this.externalParamProfileForm.dirty) {
+    if (this.form.dirty) {
       this.confirmDialogService.confirmBeforeClosing(this.dialogRef);
     } else {
       this.dialogRef.close();
     }
   }
 
-  onValidate() {
-    return false;
+  isFormInvalid() {
+    return this.form.pending || this.form.invalid;
   }
 
   firstStepInvalid(): boolean {
-    return this.externalParamProfileForm.get('name').invalid || this.externalParamProfileForm.get('description').invalid;
-  }
+    const nameControl = this.form.controls.name;
+    const descriptionControl = this.form.controls.description;
+    const accessContractControl = this.form.controls.accessContract;
 
-  formValid(): boolean {
-    return this.externalParamProfileForm.pending || this.externalParamProfileForm.invalid;
+    return nameControl.invalid || nameControl.pending || descriptionControl.invalid || accessContractControl.invalid;
   }
 }

ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile-detail/information-tab/information-tab.component.ts

@@ -39,7 +39,7 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { of, skip, Subscription } from 'rxjs';
 import { catchError, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
 import { extend, isEqual } from 'underscore';
-import { ApplicationId, ExternalParamProfile } from 'vitamui-library';
+import { ExternalParamProfile } from 'vitamui-library';
 import { ExternalParamProfileService } from '../../external-param-profile.service';
 import { ExternalParamProfileValidators } from '../../external-param-profile.validators';
 
@@ -127,13 +127,7 @@ export class InformationTabComponent implements OnDestroy, OnInit, OnChanges {
   private initFormValidators(externalParamProfile: ExternalParamProfile) {
     this.form
       .get('name')
-      .setAsyncValidators(
-        this.externalParamProfileValidators.nameExists(
-          +this.tenantIdentifier,
-          ApplicationId.EXTERNAL_PARAM_PROFILE_APP,
-          externalParamProfile.name,
-        ),
-      );
+      .setAsyncValidators(this.externalParamProfileValidators.nameExists(+this.tenantIdentifier, externalParamProfile.name));
   }
 
   private initFormActivationState(readOnly: boolean) {

ui/ui-frontend/projects/identity/src/app/external-param-profile/external-param-profile.validators.ts

@@ -38,6 +38,7 @@ import { Injectable } from '@angular/core';
 import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
 import { of, timer } from 'rxjs';
 import { map, switchMap, take } from 'rxjs/operators';
+import { ApplicationId } from 'vitamui-library';
 import { ExternalParamProfileService } from './external-param-profile.service';
 
 @Injectable({
@@ -48,12 +49,12 @@ export class ExternalParamProfileValidators {
 
   constructor(private externalParamProfileService: ExternalParamProfileService) {}
 
-  nameExists = (tenantIdentifier: number, applicationName: string, nameToIgnore?: string): AsyncValidatorFn => {
+  nameExists = (tenantIdentifier: number, nameToIgnore?: string): AsyncValidatorFn => {
     return (control: AbstractControl) => {
       return timer(this.debounceTime).pipe(
         switchMap(() =>
           control.value !== nameToIgnore
-            ? this.externalParamProfileService.exists(tenantIdentifier, applicationName, control.value)
+            ? this.externalParamProfileService.exists(tenantIdentifier, ApplicationId.EXTERNAL_PARAMS, control.value)
             : of(false),
         ),
         take(1),

ui/ui-frontend/projects/identity/src/app/group/group-create/group-create.component.ts

@@ -108,11 +108,17 @@ export class GroupCreateComponent implements OnInit, OnDestroy {
   }
 
   firstStepInvalid(): boolean {
-    return this.form.get('name').invalid || this.form.get('description').invalid || this.form.get('level').invalid;
+    const nameControl = this.form.controls.name;
+    const descriptionControl = this.form.controls.description;
+    const levelControl = this.form.controls.level;
+
+    return nameControl.invalid || nameControl.pending || descriptionControl.invalid || levelControl.invalid;
   }
 
   secondStepInvalid(): boolean {
-    return this.form.get('profileIds').invalid;
+    const profileIdsControl = this.form.controls.profileIds;
+
+    return profileIdsControl.invalid || profileIdsControl.pending;
   }
 
   formValid(): boolean {

ui/ui-frontend/projects/vitamui-library/src/app/modules/application-id.enum.ts

@@ -64,6 +64,7 @@ export enum ApplicationId {
   INGEST_APP_REF = 'INGEST_APP',
   LOGBOOK_MANAGEMENT_OPERATION_APP = 'LOGBOOK_MANAGEMENT_OPERATION_APP',
   EXTERNAL_PARAM_PROFILE_APP = 'EXTERNAL_PARAM_PROFILE_APP',
+  EXTERNAL_PARAMS = 'EXTERNAL_PARAMS',
   MANAGEMENT_CONTRACT_APP = 'MANAGEMENT_CONTRACT_APP',
   COLLECT_APP = 'COLLECT_APP',
 }