diff --git a/components/input-number/doc/index.en-US.md b/components/input-number/doc/index.en-US.md index 964e723550..35499546fa 100755 --- a/components/input-number/doc/index.en-US.md +++ b/components/input-number/doc/index.en-US.md @@ -24,6 +24,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; | `[ngModel]` | current value, double binding | `number \| string` \| `string` | - | | `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | | `[nzDisabled]` | disable the input | `boolean` | `false` | +| `[nzReadOnly]` | If readonly the input | `boolean` | `false` | | `[nzMax]` | max value | `number` | `Infinity` | | `[nzMin]` | min value | `number` | `-Infinity` | | `[nzFormatter]` | Specifies the format of the value presented | `(value: number \| string) => string \| number` | - | diff --git a/components/input-number/doc/index.zh-CN.md b/components/input-number/doc/index.zh-CN.md index 076cd8426e..f073ea2dc5 100755 --- a/components/input-number/doc/index.zh-CN.md +++ b/components/input-number/doc/index.zh-CN.md @@ -25,6 +25,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number'; | `[ngModel]` | 当前值,可双向绑定 | `number \| string` \| `string` | - | | `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` | | `[nzDisabled]` | 禁用 | `boolean` | `false` | +| `[nzReadOnly]` | 只读 | `boolean` | `false` | | `[nzMax]` | 最大值 | `number` | `Infinity` | | `[nzMin]` | 最小值 | `number` | `-Infinity` | | `[nzFormatter]` | 指定输入框展示值的格式 | `(value: number \| string) => string \| number` | - | diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts index f15665e01f..8c8af32fe2 100644 --- a/components/input-number/input-number.component.ts +++ b/components/input-number/input-number.component.ts @@ -70,6 +70,7 @@ import { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util'; [attr.max]="nzMax" [placeholder]="nzPlaceHolder" [attr.step]="nzStep" + [readOnly]="nzReadOnly" [attr.inputmode]="nzInputMode" [ngModel]="displayValue" (ngModelChange)="onModelChange($event)" @@ -91,11 +92,13 @@ import { InputBoolean, isNotNil } from 'ng-zorro-antd/core/util'; '[class.ant-input-number-lg]': `nzSize === 'large'`, '[class.ant-input-number-sm]': `nzSize === 'small'`, '[class.ant-input-number-disabled]': 'nzDisabled', + '[class.ant-input-number-readonly]': 'nzReadOnly', '[class.ant-input-number-rtl]': `dir === 'rtl'` } }) export class NzInputNumberComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy { static ngAcceptInputType_nzDisabled: BooleanInput; + static ngAcceptInputType_nzReadOnly: BooleanInput; static ngAcceptInputType_nzAutoFocus: BooleanInput; private autoStepTimer?: number; @@ -127,6 +130,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn @Input() nzInputMode: string = 'decimal'; @Input() nzId: string | null = null; @Input() @InputBoolean() nzDisabled = false; + @Input() @InputBoolean() nzReadOnly = false; @Input() @InputBoolean() nzAutoFocus = false; @Input() nzFormatter: (value: number) => string | number = value => value; diff --git a/components/input-number/input-number.spec.ts b/components/input-number/input-number.spec.ts index d916129557..711356c936 100644 --- a/components/input-number/input-number.spec.ts +++ b/components/input-number/input-number.spec.ts @@ -14,7 +14,11 @@ describe('input number', () => { beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ imports: [NzInputNumberModule, FormsModule, ReactiveFormsModule], - declarations: [NzTestInputNumberBasicComponent, NzTestInputNumberFormComponent] + declarations: [ + NzTestInputNumberBasicComponent, + NzTestInputNumberFormComponent, + NzTestReadOnlyInputNumberBasicComponent + ] }); TestBed.compileComponents(); })); @@ -467,6 +471,34 @@ describe('input number', () => { expect(testComponent.formGroup.get('inputNumber')!.value).toBe(10); })); }); + describe('input number readOnly', () => { + let fixture: ComponentFixture; + let testComponent: NzTestReadOnlyInputNumberBasicComponent; + let inputNumber: DebugElement; + let inputElement: HTMLInputElement; + + beforeEach(fakeAsync(() => { + fixture = TestBed.createComponent(NzTestReadOnlyInputNumberBasicComponent); + fixture.detectChanges(); + flush(); + fixture.detectChanges(); + testComponent = fixture.debugElement.componentInstance; + + inputNumber = fixture.debugElement.query(By.directive(NzInputNumberComponent)); + inputElement = inputNumber.nativeElement.querySelector('input'); + })); + it('should readOnly work', () => { + fixture.detectChanges(); + testComponent.readonly = true; + testComponent.nzInputNumberComponent.nzReadOnly = true; + testComponent.nzInputNumberComponent.ngAfterViewInit(); + fixture.detectChanges(); + expect(inputElement.attributes.getNamedItem('readOnly')!.name).toBe('readonly'); + testComponent.readonly = false; + fixture.detectChanges(); + expect(inputElement.attributes.getNamedItem('readOnly')).toBe(null); + }); + }); }); @Component({ @@ -505,6 +537,14 @@ export class NzTestInputNumberBasicComponent { modelChange = jasmine.createSpy('change callback'); } +@Component({ + template: ` ` +}) +export class NzTestReadOnlyInputNumberBasicComponent { + @ViewChild(NzInputNumberComponent, { static: false }) nzInputNumberComponent!: NzInputNumberComponent; + readonly = false; +} + @Component({ template: `