fix(module:input-number,checkbox): accept the disabled change from ng…

… control (#8979) * fix(module:input-number): accept the disabled change from ng control * fix(module:checkbox): accept the disabled change from ng control
NG-ZORRO · Jan 21, 2025 · 2d8968d · 2d8968d
1 parent 5d261e4
commit 2d8968d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 7 deletions.
diff --git a/components/checkbox/checkbox-group.component.ts b/components/checkbox/checkbox-group.component.ts
@@ -124,9 +124,7 @@ export class NzCheckboxGroupComponent implements ControlValueAccessor {
   }
 
   setDisabledState(disabled: boolean): void {
-    if (!this.isDisabledFirstChange) {
-      this.finalDisabled.set(disabled);
-    }
+    this.finalDisabled.set((this.isDisabledFirstChange && this.nzDisabled()) || disabled);
     this.isDisabledFirstChange = false;
   }
 

diff --git a/components/checkbox/checkbox-group.spec.ts b/components/checkbox/checkbox-group.spec.ts
@@ -53,6 +53,15 @@ describe('checkbox group', () => {
     }
   });
 
+  it('should be set disabled by ng control', async () => {
+    component.controlDisabled = true;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    for (const element of getOptionElements()) {
+      expect(element.classList).toContain('ant-checkbox-wrapper-disabled');
+    }
+  });
+
   it('should be change value', async () => {
     component.value = ['A'];
     fixture.detectChanges();
@@ -150,7 +159,15 @@ describe('checkbox group with custom layout', () => {
 
 @Component({
   imports: [NzCheckboxModule, FormsModule],
-  template: ` <nz-checkbox-group [nzOptions]="options" [nzName]="name" [nzDisabled]="disabled" [(ngModel)]="value" /> `
+  template: `
+    <nz-checkbox-group
+      [nzOptions]="options"
+      [nzName]="name"
+      [nzDisabled]="disabled"
+      [(ngModel)]="value"
+      [disabled]="controlDisabled"
+    />
+  `
 })
 class CheckboxGroupTestComponent {
   options: string[] | number[] | NzCheckboxOption[] = [
@@ -160,6 +177,7 @@ class CheckboxGroupTestComponent {
   ];
   value: string[] = [];
   disabled = false;
+  controlDisabled = false;
   name: string | null = null;
 }
 

diff --git a/components/input-number/input-number.component.spec.ts b/components/input-number/input-number.component.spec.ts
@@ -218,6 +218,14 @@ describe('Input number', () => {
     expect(hostElement.classList).toContain('ant-input-number-disabled');
   });
 
+  it('should be set disabled by ng control', async () => {
+    component.controlDisabled = true;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(hostElement.querySelector('input')!.disabled).toBeTruthy();
+    expect(hostElement.classList).toContain('ant-input-number-disabled');
+  });
+
   it('should be set readonly', () => {
     component.readonly = true;
     fixture.detectChanges();
@@ -347,6 +355,7 @@ describe('Input number with affixes or addons', () => {
       [nzKeyboard]="keyboard"
       [nzControls]="controls"
       [(ngModel)]="value"
+      [disabled]="controlDisabled"
     />
   `
 })
@@ -366,6 +375,7 @@ class InputNumberTestComponent {
   controls = true;
 
   value: number | null = null;
+  controlDisabled = false;
   inputNumber = viewChild.required(NzInputNumberComponent);
 }
 

diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts
@@ -341,9 +341,7 @@ export class NzInputNumberComponent implements OnInit, ControlValueAccessor {
   }
 
   setDisabledState(disabled: boolean): void {
-    if (!this.isDisabledFirstChange) {
-      this.finalDisabled.set(disabled);
-    }
+    this.finalDisabled.set((this.isDisabledFirstChange && this.nzDisabled()) || disabled);
     this.isDisabledFirstChange = false;
   }