fix(module:segmented): fix error with the FormControl first change (#9039)

Author: xiayu1996

components/segmented/segmented-item.component.ts

@@ -8,9 +8,11 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  DestroyRef,
   ElementRef,
   inject,
   Input,
+  OnInit,
   ViewEncapsulation
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@@ -50,7 +52,7 @@ import { NzSegmentedService } from './segmented.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None
 })
-export class NzSegmentedItemComponent {
+export class NzSegmentedItemComponent implements OnInit {
   @Input() nzIcon?: string;
   @Input() nzValue!: string | number;
   @Input() nzDisabled?: boolean;
@@ -59,17 +61,25 @@ export class NzSegmentedItemComponent {
 
   private readonly service = inject(NzSegmentedService);
 
-  constructor() {
-    const cdr = inject(ChangeDetectorRef);
-    const elementRef = inject(ElementRef);
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private elementRef: ElementRef,
+    private destroyRef: DestroyRef
+  ) {
+    this.service.disabled$.pipe(takeUntilDestroyed()).subscribe(disabled => {
+      this.nzDisabled = disabled;
+      this.cdr.markForCheck();
+    });
+  }
 
+  ngOnInit(): void {
     this.service.selected$
       .pipe(
         tap(value => {
           this.isChecked = false;
-          cdr.markForCheck();
+          this.cdr.markForCheck();
           if (value === this.nzValue) {
-            this.service.activated$.next(elementRef.nativeElement);
+            this.service.activated$.next(this.elementRef.nativeElement);
           }
         }),
         switchMap(value =>
@@ -80,17 +90,12 @@ export class NzSegmentedItemComponent {
           )
         ),
         filter(value => value === this.nzValue),
-        takeUntilDestroyed()
+        takeUntilDestroyed(this.destroyRef)
       )
       .subscribe(() => {
         this.isChecked = true;
-        cdr.markForCheck();
+        this.cdr.markForCheck();
       });
-
-    this.service.disabled$.pipe(takeUntilDestroyed()).subscribe(disabled => {
-      this.nzDisabled = disabled;
-      cdr.markForCheck();
-    });
   }
 
   handleClick(): void {

components/segmented/segmented.spec.ts

@@ -5,7 +5,7 @@
 
 import { Component, DebugElement } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';
 
@@ -112,6 +112,36 @@ describe('nz-segmented', () => {
       expect(component.value).toBe('Daily');
     }));
   });
+  describe('in reactive form', () => {
+    let fixture: ComponentFixture<NzSegmentedInReactiveFormTestComponent>;
+    let component: NzSegmentedInReactiveFormTestComponent;
+    let segmentedComponent: DebugElement;
+
+    function getSegmentedOptionByIndex(index: number): HTMLElement {
+      return segmentedComponent.nativeElement.querySelectorAll('.ant-segmented-item')[index];
+    }
+
+    beforeEach(() => {
+      TestBed.configureTestingModule({
+        providers: [provideNoopAnimations()]
+      });
+      fixture = TestBed.createComponent(NzSegmentedInReactiveFormTestComponent);
+      component = fixture.componentInstance;
+      segmentedComponent = fixture.debugElement.query(By.directive(NzSegmentedComponent));
+      fixture.detectChanges();
+    });
+
+    it('first change form control value should work', fakeAsync(() => {
+      expect(component.formControl.value).toBe('Weekly');
+      const theThirdElement = getSegmentedOptionByIndex(2);
+      dispatchMouseEvent(theThirdElement.querySelector('.ant-segmented-item-label')!, 'click');
+      tick(400);
+      fixture.detectChanges();
+      const theSecondElement = getSegmentedOptionByIndex(1);
+      expect(theSecondElement.classList.contains('ant-segmented-item-selected')).toBeFalse();
+      expect(theThirdElement.classList.contains('ant-segmented-item-selected')).toBeTrue();
+    }));
+  });
 });
 
 @Component({
@@ -138,3 +168,12 @@ export class NzSegmentedTestComponent {
     // empty
   }
 }
+
+@Component({
+  imports: [ReactiveFormsModule, NzSegmentedModule],
+  template: `<nz-segmented [nzOptions]="options" [formControl]="formControl"></nz-segmented>`
+})
+export class NzSegmentedInReactiveFormTestComponent {
+  options = ['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly'];
+  formControl = new FormControl('Weekly');
+}