fix(stepper): set panel validation after input touched (#1567)

This is a backport of b4f2a30 (#1465) to 16.x. CDE-1865 Co-authored-by: mivaylo <[email protected]>
vmware-clarity · Sep 26, 2024 · 39701f3 · 39701f3
1 parent bda426e
commit 39701f3
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/projects/angular/src/accordion/stepper/stepper-panel.ts b/projects/angular/src/accordion/stepper/stepper-panel.ts
@@ -81,6 +81,10 @@ export class ClrStepperPanel extends ClrAccordionPanel implements OnInit {
 
       this.subscriptions.push(
         this.formGroup.statusChanges.pipe(skipUntil(invalidStatusTrigger), distinctUntilChanged()).subscribe(status => {
+          if (!this.formGroup.touched) {
+            return;
+          }
+
           if (status === 'VALID') {
             this.stepperService.setPanelValid(this.id);
           } else if (status === 'INVALID') {

diff --git a/projects/angular/src/accordion/stepper/stepper.spec.ts b/projects/angular/src/accordion/stepper/stepper.spec.ts
@@ -110,10 +110,10 @@ describe('ClrStepper', () => {
       fixture.detectChanges();
 
       expect(group1.valid).toBe(false, 'first panel form is now invalid');
-      expect(stepperService.setPanelInvalid).toHaveBeenCalledTimes(1);
+      expect(stepperService.setPanelInvalid).not.toHaveBeenCalled();
     });
 
-    it('should set the panel status to invalid immediately', () => {
+    it('should not set the panel status to invalid immediately', () => {
       // setup
       spyOn(stepperService, 'setPanelInvalid');
       const form = testComponent.form.controls.group;
@@ -123,7 +123,7 @@ describe('ClrStepper', () => {
       fixture.detectChanges();
 
       // assert
-      expect(stepperService.setPanelInvalid).toHaveBeenCalledTimes(1);
+      expect(stepperService.setPanelInvalid).not.toHaveBeenCalled();
     });
 
     it('should set the panel status to valid if form was previously invalid', () => {
@@ -135,6 +135,12 @@ describe('ClrStepper', () => {
       form.controls.name.setValue('');
       fixture.detectChanges();
 
+      form.controls.name.markAsTouched();
+      form.controls.name.markAsDirty();
+      form.controls.name.updateValueAndValidity();
+
+      fixture.detectChanges();
+
       // act 2 (make form valid)
       form.controls.name.setValue('Bob');
       fixture.detectChanges();

diff --git a/projects/demo/src/app/stepper/stepper.demo.html b/projects/demo/src/app/stepper/stepper.demo.html
@@ -21,8 +21,8 @@ <h2>Angular - Stepper Reactive Forms</h2>
     <clr-step-content *clrIfExpanded>
       <clr-input-container>
         <label>First Name</label>
-        <input clrInput formControlName="first" />
-        <clr-control-error *clrIfError="'required'">First Name Required</clr-control-error>
+        <input clrInput formControlName="first" minlength="4" />
+        <clr-control-error *clrIfError="'minlength'">First Name Length</clr-control-error>
       </clr-input-container>
 
       <clr-input-container>

diff --git a/projects/demo/src/app/stepper/stepper.demo.ts b/projects/demo/src/app/stepper/stepper.demo.ts
@@ -53,7 +53,7 @@ export class StepperDemo {
   private getReactiveForm() {
     return new FormGroup({
       name: new FormGroup({
-        first: new FormControl('Luke', Validators.required),
+        first: new FormControl('', Validators.minLength(4)),
         last: new FormControl('Skywalker', Validators.required),
       }),
       contact: new FormGroup({