Skip to content

Commit eb2cb04

Browse files
Nicoss54Nicoss54
authored
fix(module:checkbox): chebox group can't be disable initially (#7806)
* fix(module:checkbox): chebox group can't be disable initially * fix(module:radio): radio group can't be disable initially
1 parent 9f7e256 commit eb2cb04

4 files changed

Lines changed: 81 additions & 26 deletions

File tree

‎components/checkbox/checkbox-group.component.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit, O
7070
dir: Direction = 'ltr';
7171

7272
private destroy$ = new Subject<void>();
73+
private isNzDisableFirstChange: boolean = true;
7374

7475
trackByOption(_: number, option: NzCheckBoxOptionInterface): string {
7576
return option.value;
@@ -125,7 +126,8 @@ export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit, O
125126
}
126127

127128
setDisabledState(disabled: boolean): void {
128-
this.nzDisabled = disabled;
129+
this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || disabled;
130+
this.isNzDisableFirstChange = false;
129131
this.cdr.markForCheck();
130132
}
131133
}

‎components/checkbox/checkbox.spec.ts‎

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -284,36 +284,52 @@ describe('checkbox', () => {
284284
describe('checkbox group form', () => {
285285
let fixture: ComponentFixture<NzTestCheckboxGroupFormComponent>;
286286
let testComponent: NzTestCheckboxGroupFormComponent;
287-
let checkboxGroup: DebugElement;
288-
let inputElement: HTMLInputElement;
289-
290287
beforeEach(fakeAsync(() => {
291288
fixture = TestBed.createComponent(NzTestCheckboxGroupFormComponent);
292-
fixture.detectChanges();
293-
flush();
294-
fixture.detectChanges();
295-
testComponent = fixture.debugElement.componentInstance;
296-
checkboxGroup = fixture.debugElement.query(By.directive(NzCheckboxGroupComponent));
297-
inputElement = checkboxGroup.nativeElement.querySelector('input') as HTMLInputElement;
289+
testComponent = fixture.componentInstance;
298290
}));
299291
it('should be in pristine, untouched, and valid states initially', fakeAsync(() => {
292+
fixture.detectChanges();
300293
flush();
294+
const checkboxGroupComponent: NzCheckboxGroupComponent = fixture.debugElement.query(
295+
By.directive(NzCheckboxGroupComponent)
296+
).componentInstance;
301297
expect(testComponent.formGroup.get('checkboxGroup')!.valid).toBe(true);
302298
expect(testComponent.formGroup.get('checkboxGroup')!.pristine).toBe(true);
303299
expect(testComponent.formGroup.get('checkboxGroup')!.touched).toBe(false);
300+
expect(checkboxGroupComponent.nzDisabled).toBeFalsy();
301+
}));
302+
it('should be disable if form is disable and nzDisable set to false initially', fakeAsync(() => {
303+
testComponent.formGroup.disable();
304+
fixture.detectChanges();
305+
flush();
306+
const checkboxGroup = fixture.debugElement.query(By.directive(NzCheckboxGroupComponent));
307+
expect(checkboxGroup.componentInstance.nzDisabled).toBeTruthy();
304308
}));
305309
it('should set disabled work', fakeAsync(() => {
310+
testComponent.nzDisabled = true;
311+
fixture.detectChanges();
306312
flush();
313+
const checkboxGroup = fixture.debugElement.query(By.directive(NzCheckboxGroupComponent));
314+
const inputElement = checkboxGroup.nativeElement.querySelector('input') as HTMLInputElement;
315+
expect(checkboxGroup.componentInstance.nzDisabled).toBeTruthy();
316+
317+
inputElement.click();
318+
fixture.detectChanges();
307319
expect(JSON.stringify(testComponent.formGroup.get('checkboxGroup')!.value)).toBe(
308320
JSON.stringify([
309321
{ label: 'Apple', value: 'Apple', checked: true },
310322
{ label: 'Pear', value: 'Pear', disabled: true },
311323
{ label: 'Orange', value: 'Orange' }
312324
])
313325
);
314-
inputElement.click();
326+
327+
testComponent.enable();
315328
fixture.detectChanges();
316329
flush();
330+
expect(checkboxGroup.componentInstance.nzDisabled).toBeFalsy();
331+
332+
inputElement.click();
317333
fixture.detectChanges();
318334
expect(JSON.stringify(testComponent.formGroup.get('checkboxGroup')!.value)).toBe(
319335
JSON.stringify([
@@ -322,12 +338,13 @@ describe('checkbox', () => {
322338
{ label: 'Orange', value: 'Orange' }
323339
])
324340
);
341+
325342
testComponent.disable();
326343
fixture.detectChanges();
327344
flush();
328-
fixture.detectChanges();
345+
expect(checkboxGroup.componentInstance.nzDisabled).toBeTruthy();
346+
329347
inputElement.click();
330-
flush();
331348
fixture.detectChanges();
332349
expect(JSON.stringify(testComponent.formGroup.get('checkboxGroup')!.value)).toBe(
333350
JSON.stringify([
@@ -479,12 +496,13 @@ export class NzTestCheckboxFormComponent {
479496
@Component({
480497
template: `
481498
<form [formGroup]="formGroup">
482-
<nz-checkbox-group formControlName="checkboxGroup"></nz-checkbox-group>
499+
<nz-checkbox-group formControlName="checkboxGroup" [nzDisabled]="nzDisabled"></nz-checkbox-group>
483500
</form>
484501
`
485502
})
486503
export class NzTestCheckboxGroupFormComponent {
487504
formGroup: UntypedFormGroup;
505+
nzDisabled = false;
488506

489507
constructor(private formBuilder: UntypedFormBuilder) {
490508
this.formGroup = this.formBuilder.group({
@@ -501,6 +519,10 @@ export class NzTestCheckboxGroupFormComponent {
501519
disable(): void {
502520
this.formGroup.disable();
503521
}
522+
523+
enable(): void {
524+
this.formGroup.enable();
525+
}
504526
}
505527

506528
@Component({

‎components/radio/radio-group.component.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export class NzRadioGroupComponent implements OnInit, ControlValueAccessor, OnDe
5656

5757
private value: NzSafeAny | null = null;
5858
private destroy$ = new Subject();
59+
private isNzDisableFirstChange: boolean = true;
5960
onChange: OnChangeType = () => {};
6061
onTouched: OnTouchedType = () => {};
6162
@Input() @InputBoolean() nzDisabled = false;
@@ -120,8 +121,9 @@ export class NzRadioGroupComponent implements OnInit, ControlValueAccessor, OnDe
120121
}
121122

122123
setDisabledState(isDisabled: boolean): void {
123-
this.nzDisabled = isDisabled;
124-
this.nzRadioService.setDisabled(isDisabled);
124+
this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || isDisabled;
125+
this.isNzDisableFirstChange = false;
126+
this.nzRadioService.setDisabled(this.nzDisabled);
125127
this.cdr.markForCheck();
126128
}
127129
}

‎components/radio/radio.spec.ts‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -302,36 +302,60 @@ describe('radio', () => {
302302
describe('radio group form', () => {
303303
let fixture: ComponentFixture<NzTestRadioGroupFormComponent>;
304304
let testComponent: NzTestRadioGroupFormComponent;
305-
let radios: DebugElement[];
306305

307306
beforeEach(fakeAsync(() => {
308307
fixture = TestBed.createComponent(NzTestRadioGroupFormComponent);
309-
fixture.detectChanges();
310-
flush();
311-
fixture.detectChanges();
312-
testComponent = fixture.debugElement.componentInstance;
313-
radios = fixture.debugElement.queryAll(By.directive(NzRadioComponent));
308+
testComponent = fixture.componentInstance;
314309
}));
315310
it('should be in pristine, untouched, and valid states initially', fakeAsync(() => {
311+
fixture.detectChanges();
316312
flush();
313+
const radioGroup: NzRadioGroupComponent = fixture.debugElement.query(
314+
By.directive(NzRadioGroupComponent)
315+
).componentInstance;
317316
expect(testComponent.formGroup.valid).toBe(true);
318317
expect(testComponent.formGroup.pristine).toBe(true);
319318
expect(testComponent.formGroup.touched).toBe(false);
319+
expect(radioGroup.nzDisabled).toBeFalsy();
320+
}));
321+
it('should be disable if form is disable and nzDisable set to false initially', fakeAsync(() => {
322+
testComponent.formGroup.disable();
323+
fixture.detectChanges();
324+
flush();
325+
const radioGroup: NzRadioGroupComponent = fixture.debugElement.query(
326+
By.directive(NzRadioGroupComponent)
327+
).componentInstance;
328+
expect(radioGroup.nzDisabled).toBeTruthy();
320329
}));
321330
it('should set disabled work', fakeAsync(() => {
331+
testComponent.nzDisabled = true;
332+
fixture.detectChanges();
322333
flush();
334+
const radios = fixture.debugElement.queryAll(By.directive(NzRadioComponent));
335+
const radioGroup: NzRadioGroupComponent = fixture.debugElement.query(
336+
By.directive(NzRadioGroupComponent)
337+
).componentInstance;
338+
expect(radioGroup.nzDisabled).toBeTruthy();
339+
radios[0].nativeElement.click();
340+
fixture.detectChanges();
323341
expect(testComponent.formGroup.get('radioGroup')!.value).toBe('B');
342+
343+
testComponent.enable();
344+
fixture.detectChanges();
345+
flush();
346+
347+
expect(radioGroup.nzDisabled).toBeFalsy();
324348
radios[0].nativeElement.click();
325349
fixture.detectChanges();
326350
expect(testComponent.formGroup.get('radioGroup')!.value).toBe('A');
351+
327352
testComponent.disable();
328353
fixture.detectChanges();
329354
flush();
330-
fixture.detectChanges();
355+
356+
expect(radioGroup.nzDisabled).toBeTruthy();
331357
radios[1].nativeElement.click();
332358
fixture.detectChanges();
333-
flush();
334-
fixture.detectChanges();
335359
expect(testComponent.formGroup.get('radioGroup')!.value).toBe('A');
336360
}));
337361
});
@@ -488,7 +512,7 @@ export class NzTestRadioFormComponent {
488512
@Component({
489513
template: `
490514
<form [formGroup]="formGroup">
491-
<nz-radio-group formControlName="radioGroup">
515+
<nz-radio-group formControlName="radioGroup" [nzDisabled]="nzDisabled">
492516
<label nz-radio-button nzValue="A">A</label>
493517
<label nz-radio-button nzValue="B">B</label>
494518
<label nz-radio-button nzValue="C">C</label>
@@ -499,6 +523,7 @@ export class NzTestRadioFormComponent {
499523
})
500524
export class NzTestRadioGroupFormComponent {
501525
formGroup: UntypedFormGroup;
526+
nzDisabled = false;
502527

503528
constructor(private formBuilder: UntypedFormBuilder) {
504529
this.formGroup = this.formBuilder.group({
@@ -509,6 +534,10 @@ export class NzTestRadioGroupFormComponent {
509534
disable(): void {
510535
this.formGroup.disable();
511536
}
537+
538+
enable(): void {
539+
this.formGroup.enable();
540+
}
512541
}
513542

514543
/** https://github.com/NG-ZORRO/ng-zorro-antd/issues/1543 **/

0 commit comments

Comments
 (0)