Skip to content

Commit

Permalink
fix(module:checkbox): chebox group can't be disable initially (#7806)
Browse files Browse the repository at this point in the history
* fix(module:checkbox): chebox group can't be disable initially

* fix(module:radio): radio group can't be disable initially
  • Loading branch information
Nicoss54 authored Jan 13, 2023
1 parent 9f7e256 commit eb2cb04
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 26 deletions.
4 changes: 3 additions & 1 deletion components/checkbox/checkbox-group.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export class NzCheckboxGroupComponent implements ControlValueAccessor, OnInit, O
dir: Direction = 'ltr';

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

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

setDisabledState(disabled: boolean): void {
this.nzDisabled = disabled;
this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || disabled;
this.isNzDisableFirstChange = false;
this.cdr.markForCheck();
}
}
48 changes: 35 additions & 13 deletions components/checkbox/checkbox.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -284,36 +284,52 @@ describe('checkbox', () => {
describe('checkbox group form', () => {
let fixture: ComponentFixture<NzTestCheckboxGroupFormComponent>;
let testComponent: NzTestCheckboxGroupFormComponent;
let checkboxGroup: DebugElement;
let inputElement: HTMLInputElement;

beforeEach(fakeAsync(() => {
fixture = TestBed.createComponent(NzTestCheckboxGroupFormComponent);
fixture.detectChanges();
flush();
fixture.detectChanges();
testComponent = fixture.debugElement.componentInstance;
checkboxGroup = fixture.debugElement.query(By.directive(NzCheckboxGroupComponent));
inputElement = checkboxGroup.nativeElement.querySelector('input') as HTMLInputElement;
testComponent = fixture.componentInstance;
}));
it('should be in pristine, untouched, and valid states initially', fakeAsync(() => {
fixture.detectChanges();
flush();
const checkboxGroupComponent: NzCheckboxGroupComponent = fixture.debugElement.query(
By.directive(NzCheckboxGroupComponent)
).componentInstance;
expect(testComponent.formGroup.get('checkboxGroup')!.valid).toBe(true);
expect(testComponent.formGroup.get('checkboxGroup')!.pristine).toBe(true);
expect(testComponent.formGroup.get('checkboxGroup')!.touched).toBe(false);
expect(checkboxGroupComponent.nzDisabled).toBeFalsy();
}));
it('should be disable if form is disable and nzDisable set to false initially', fakeAsync(() => {
testComponent.formGroup.disable();
fixture.detectChanges();
flush();
const checkboxGroup = fixture.debugElement.query(By.directive(NzCheckboxGroupComponent));
expect(checkboxGroup.componentInstance.nzDisabled).toBeTruthy();
}));
it('should set disabled work', fakeAsync(() => {
testComponent.nzDisabled = true;
fixture.detectChanges();
flush();
const checkboxGroup = fixture.debugElement.query(By.directive(NzCheckboxGroupComponent));
const inputElement = checkboxGroup.nativeElement.querySelector('input') as HTMLInputElement;
expect(checkboxGroup.componentInstance.nzDisabled).toBeTruthy();

inputElement.click();
fixture.detectChanges();
expect(JSON.stringify(testComponent.formGroup.get('checkboxGroup')!.value)).toBe(
JSON.stringify([
{ label: 'Apple', value: 'Apple', checked: true },
{ label: 'Pear', value: 'Pear', disabled: true },
{ label: 'Orange', value: 'Orange' }
])
);
inputElement.click();

testComponent.enable();
fixture.detectChanges();
flush();
expect(checkboxGroup.componentInstance.nzDisabled).toBeFalsy();

inputElement.click();
fixture.detectChanges();
expect(JSON.stringify(testComponent.formGroup.get('checkboxGroup')!.value)).toBe(
JSON.stringify([
Expand All @@ -322,12 +338,13 @@ describe('checkbox', () => {
{ label: 'Orange', value: 'Orange' }
])
);

testComponent.disable();
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(checkboxGroup.componentInstance.nzDisabled).toBeTruthy();

inputElement.click();
flush();
fixture.detectChanges();
expect(JSON.stringify(testComponent.formGroup.get('checkboxGroup')!.value)).toBe(
JSON.stringify([
Expand Down Expand Up @@ -479,12 +496,13 @@ export class NzTestCheckboxFormComponent {
@Component({
template: `
<form [formGroup]="formGroup">
<nz-checkbox-group formControlName="checkboxGroup"></nz-checkbox-group>
<nz-checkbox-group formControlName="checkboxGroup" [nzDisabled]="nzDisabled"></nz-checkbox-group>
</form>
`
})
export class NzTestCheckboxGroupFormComponent {
formGroup: UntypedFormGroup;
nzDisabled = false;

constructor(private formBuilder: UntypedFormBuilder) {
this.formGroup = this.formBuilder.group({
Expand All @@ -501,6 +519,10 @@ export class NzTestCheckboxGroupFormComponent {
disable(): void {
this.formGroup.disable();
}

enable(): void {
this.formGroup.enable();
}
}

@Component({
Expand Down
6 changes: 4 additions & 2 deletions components/radio/radio-group.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export class NzRadioGroupComponent implements OnInit, ControlValueAccessor, OnDe

private value: NzSafeAny | null = null;
private destroy$ = new Subject();
private isNzDisableFirstChange: boolean = true;
onChange: OnChangeType = () => {};
onTouched: OnTouchedType = () => {};
@Input() @InputBoolean() nzDisabled = false;
Expand Down Expand Up @@ -120,8 +121,9 @@ export class NzRadioGroupComponent implements OnInit, ControlValueAccessor, OnDe
}

setDisabledState(isDisabled: boolean): void {
this.nzDisabled = isDisabled;
this.nzRadioService.setDisabled(isDisabled);
this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || isDisabled;
this.isNzDisableFirstChange = false;
this.nzRadioService.setDisabled(this.nzDisabled);
this.cdr.markForCheck();
}
}
49 changes: 39 additions & 10 deletions components/radio/radio.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -302,36 +302,60 @@ describe('radio', () => {
describe('radio group form', () => {
let fixture: ComponentFixture<NzTestRadioGroupFormComponent>;
let testComponent: NzTestRadioGroupFormComponent;
let radios: DebugElement[];

beforeEach(fakeAsync(() => {
fixture = TestBed.createComponent(NzTestRadioGroupFormComponent);
fixture.detectChanges();
flush();
fixture.detectChanges();
testComponent = fixture.debugElement.componentInstance;
radios = fixture.debugElement.queryAll(By.directive(NzRadioComponent));
testComponent = fixture.componentInstance;
}));
it('should be in pristine, untouched, and valid states initially', fakeAsync(() => {
fixture.detectChanges();
flush();
const radioGroup: NzRadioGroupComponent = fixture.debugElement.query(
By.directive(NzRadioGroupComponent)
).componentInstance;
expect(testComponent.formGroup.valid).toBe(true);
expect(testComponent.formGroup.pristine).toBe(true);
expect(testComponent.formGroup.touched).toBe(false);
expect(radioGroup.nzDisabled).toBeFalsy();
}));
it('should be disable if form is disable and nzDisable set to false initially', fakeAsync(() => {
testComponent.formGroup.disable();
fixture.detectChanges();
flush();
const radioGroup: NzRadioGroupComponent = fixture.debugElement.query(
By.directive(NzRadioGroupComponent)
).componentInstance;
expect(radioGroup.nzDisabled).toBeTruthy();
}));
it('should set disabled work', fakeAsync(() => {
testComponent.nzDisabled = true;
fixture.detectChanges();
flush();
const radios = fixture.debugElement.queryAll(By.directive(NzRadioComponent));
const radioGroup: NzRadioGroupComponent = fixture.debugElement.query(
By.directive(NzRadioGroupComponent)
).componentInstance;
expect(radioGroup.nzDisabled).toBeTruthy();
radios[0].nativeElement.click();
fixture.detectChanges();
expect(testComponent.formGroup.get('radioGroup')!.value).toBe('B');

testComponent.enable();
fixture.detectChanges();
flush();

expect(radioGroup.nzDisabled).toBeFalsy();
radios[0].nativeElement.click();
fixture.detectChanges();
expect(testComponent.formGroup.get('radioGroup')!.value).toBe('A');

testComponent.disable();
fixture.detectChanges();
flush();
fixture.detectChanges();

expect(radioGroup.nzDisabled).toBeTruthy();
radios[1].nativeElement.click();
fixture.detectChanges();
flush();
fixture.detectChanges();
expect(testComponent.formGroup.get('radioGroup')!.value).toBe('A');
}));
});
Expand Down Expand Up @@ -488,7 +512,7 @@ export class NzTestRadioFormComponent {
@Component({
template: `
<form [formGroup]="formGroup">
<nz-radio-group formControlName="radioGroup">
<nz-radio-group formControlName="radioGroup" [nzDisabled]="nzDisabled">
<label nz-radio-button nzValue="A">A</label>
<label nz-radio-button nzValue="B">B</label>
<label nz-radio-button nzValue="C">C</label>
Expand All @@ -499,6 +523,7 @@ export class NzTestRadioFormComponent {
})
export class NzTestRadioGroupFormComponent {
formGroup: UntypedFormGroup;
nzDisabled = false;

constructor(private formBuilder: UntypedFormBuilder) {
this.formGroup = this.formBuilder.group({
Expand All @@ -509,6 +534,10 @@ export class NzTestRadioGroupFormComponent {
disable(): void {
this.formGroup.disable();
}

enable(): void {
this.formGroup.enable();
}
}

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

0 comments on commit eb2cb04

Please sign in to comment.