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,12 +7,12 @@
   ]"
 ></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
+          >{{ 'EXTERNAL_PARAM_PROFILE.PROFILE' | translate }} <span *ngIf="!form.get('enabled').value">in</span
           >{{ 'COMMON.ACTIVE' | translate }}</vitamui-slide-toggle
         >
 
@@ -51,7 +51,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.get('usePlatformThreshold').value">
           <vitamui-select
             class="w-100"
             formControlName="bulkOperationsThreshold"
@@ -71,7 +71,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

@@ -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,7 +91,7 @@ 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)]],
@@ -100,16 +100,16 @@ export class ExternalParamProfileCreateComponent implements OnInit, OnDestroy {
       bulkOperationsThreshold: [null, []],
     });
 
-    this.externalParamProfileForm
+    this.form
       .get('name')
-      .setAsyncValidators(this.externalParamProfileValidators.nameExists(+tenantIdentifier, ApplicationId.EXTERNAL_PARAM_PROFILE_APP));
+      .setAsyncValidators(this.externalParamProfileValidators.nameExists(+tenantIdentifier, ApplicationId.EXTERNAL_PARAMS));
   }
 
   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

@@ -128,11 +128,7 @@ export class InformationTabComponent implements OnDestroy, OnInit, OnChanges {
     this.form
       .get('name')
       .setAsyncValidators(
-        this.externalParamProfileValidators.nameExists(
-          +this.tenantIdentifier,
-          ApplicationId.EXTERNAL_PARAM_PROFILE_APP,
-          externalParamProfile.name,
-        ),
+        this.externalParamProfileValidators.nameExists(+this.tenantIdentifier, ApplicationId.EXTERNAL_PARAMS, externalParamProfile.name),
       );
   }
 

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',
 }