Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(module:input-number): add nzReadOnly property #7372

Merged
merged 8 commits into from
Apr 20, 2022
Merged

feat(module:input-number): add nzReadOnly property #7372

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
306c382
feat(module:input-number): add nzReadOnly property
chenc041 Apr 19, 2022
effedfc
chore(module:input-number): modify property name
chenc041 Apr 19, 2022
58eeadd
chore(module:input-number): modify test case name
chenc041 Apr 19, 2022
237e30f
chore: modify doc style
chenc041 Apr 20, 2022
02ba595
chore: doc style
chenc041 Apr 20, 2022
e37feef
chore: doc style
chenc041 Apr 20, 2022
551f622
chore: input doc style
chenc041 Apr 20, 2022
9d713bd
chore: doc style
chenc041 Apr 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 19 additions & 18 deletions components/input-number/doc/index.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,25 +19,26 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';

### nz-input-number

| property | description | type | default |
| -------- | ----------- | ---- | ------- |
| `[ngModel]` | current value, double binding | `number \| string` \| `string` | - |
| `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` |
| `[nzDisabled]` | disable 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` | - |
| `[nzParser]` | Specifies the value extracted from nzFormatter | `(value: string) => string \| number` | `(value: string) => value.trim().replace(/。/g, '.').replace(/[^\w\.-]+/g, '')` |
| `[nzPrecision]` | precision of input value | `number` | - |
| property | description | type | default |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unnecessary whitespace, please check your config of prettier :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

|---------------------| ----------- | ---- | ------- |
| `[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` | - |
| `[nzParser]` | Specifies the value extracted from nzFormatter | `(value: string) => string \| number` | `(value: string) => value.trim().replace(/。/g, '.').replace(/[^\w\.-]+/g, '')` |
| `[nzPrecision]` | precision of input value | `number` | - |
| `[nzPrecisionMode]` | The method for calculating the precision of input value | `'cut' \| 'toFixed' \| ((value: number \| string, precision?: number) => number)` | `'toFixed'` |
| `[nzSize]` | width of input box | `'large' \| 'small' \| 'default'` | `'default'` |
| `[nzStep]` | The number to which the current value is increased or decreased. It can be an integer or decimal. | `number \| string` | `1` |
| `[nzInputMode]` | enumerated attribute that hints at the type of data that might be entered by the user, [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) | `string` | `decimal` |
| `[nzPlaceHolder]` | Placeholder of select | `string` | - |
| `[nzId]` | input id attribute inside the component| `string` | - |
| `(ngModelChange)` | The callback triggered when the value is changed | `EventEmitter<number>` | - |
| `(nzFocus)` | focus callback | `EventEmitter<void>` | - |
| `(nzBlur)` | blur callback | `EventEmitter<void>` | - |
| `[nzSize]` | width of input box | `'large' \| 'small' \| 'default'` | `'default'` |
| `[nzStep]` | The number to which the current value is increased or decreased. It can be an integer or decimal. | `number \| string` | `1` |
| `[nzInputMode]` | enumerated attribute that hints at the type of data that might be entered by the user, [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) | `string` | `decimal` |
| `[nzPlaceHolder]` | Placeholder of select | `string` | - |
| `[nzId]` | input id attribute inside the component| `string` | - |
| `(ngModelChange)` | The callback triggered when the value is changed | `EventEmitter<number>` | - |
| `(nzFocus)` | focus callback | `EventEmitter<void>` | - |
| `(nzBlur)` | blur callback | `EventEmitter<void>` | - |

#### Methods

Expand Down
39 changes: 20 additions & 19 deletions components/input-number/doc/index.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,25 +20,26 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';

### nz-input-number

| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| `[ngModel]` | 当前值，可双向绑定 | `number \| string` \| `string` | - |
| `[nzAutoFocus]` | 自动获取焦点 | `boolean` | `false` |
| `[nzDisabled]` | 禁用 | `boolean` | `false` |
| `[nzMax]` | 最大值 | `number` | `Infinity` |
| `[nzMin]` | 最小值 | `number` | `-Infinity` |
| `[nzFormatter]` | 指定输入框展示值的格式 | `(value: number \| string) => string \| number` | - |
| `[nzParser]` | 指定从 nzFormatter 里转换回数字的方式，和 nzFormatter 搭配使用 | `(value: string) => string \| number` | `(value: string) => value.trim().replace(/。/g, '.').replace(/[^\w\.-]+/g, '')` |
| `[nzPrecision]` | 数值精度 | `number` | - |
| `[nzPrecisionMode]` | 数值精度的取值方式 | `'cut' \| 'toFixed' \| ((value: number \| string, precision?: number) => number)` | `'toFixed'` |
| `[nzSize]` | 输入框大小 | `'large' \| 'small' \| 'default'` | `'default'` |
| `[nzStep]` | 每次改变步数，可以为小数 | `number \| string` | `1` |
| `[nzInputMode]` | 提供了用户在编辑元素或其内容时可能输入的数据类型的提示，详见[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode) | `string` | `decimal` |
| `[nzPlaceHolder]` | 选择框默认文字 | `string` | - |
| `[nzId]` | 组件内部 input 的 id 值 | `string` | - |
| `(ngModelChange)` | 数值改变时回调 | `EventEmitter<number>` | - |
| `(nzFocus)` | focus时回调 | `EventEmitter<void>` | - |
| `(nzBlur)` | blur时回调 | `EventEmitter<void>` | - |
| 成员 | 说明 | 类型 | 默认值 |
|---------------------|--------------------------------------------------------------------------------------------------------------------| --- | --- |
| `[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` | - |
| `[nzParser]` | 指定从 nzFormatter 里转换回数字的方式，和 nzFormatter 搭配使用 | `(value: string) => string \| number` | `(value: string) => value.trim().replace(/。/g, '.').replace(/[^\w\.-]+/g, '')` |
| `[nzPrecision]` | 数值精度 | `number` | - |
| `[nzPrecisionMode]` | 数值精度的取值方式 | `'cut' \| 'toFixed' \| ((value: number \| string, precision?: number) => number)` | `'toFixed'` |
| `[nzSize]` | 输入框大小 | `'large' \| 'small' \| 'default'` | `'default'` |
| `[nzStep]` | 每次改变步数，可以为小数 | `number \| string` | `1` |
| `[nzInputMode]` | 提供了用户在编辑元素或其内容时可能输入的数据类型的提示，详见[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/inputmode) | `string` | `decimal` |
| `[nzPlaceHolder]` | 选择框默认文字 | `string` | - |
| `[nzId]` | 组件内部 input 的 id 值 | `string` | - |
| `(ngModelChange)` | 数值改变时回调 | `EventEmitter<number>` | - |
| `(nzFocus)` | focus时回调 | `EventEmitter<void>` | - |
| `(nzBlur)` | blur时回调 | `EventEmitter<void>` | - |

#### 方法

Expand Down
4 changes: 4 additions & 0 deletions components/input-number/input-number.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand All @@ -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;
Expand Down Expand Up @@ -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;

Expand Down
42 changes: 41 additions & 1 deletion components/input-number/input-number.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ describe('input number', () => {
beforeEach(fakeAsync(() => {
TestBed.configureTestingModule({
imports: [NzInputNumberModule, FormsModule, ReactiveFormsModule],
declarations: [NzTestInputNumberBasicComponent, NzTestInputNumberFormComponent]
declarations: [
NzTestInputNumberBasicComponent,
NzTestInputNumberFormComponent,
NzTestReadOnlyInputNumberBasicComponent
]
});
TestBed.compileComponents();
}));
Expand Down Expand Up @@ -467,6 +471,34 @@ describe('input number', () => {
expect(testComponent.formGroup.get('inputNumber')!.value).toBe(10);
}));
});
describe('input number readOnly', () => {
let fixture: ComponentFixture<NzTestReadOnlyInputNumberBasicComponent>;
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({
Expand Down Expand Up @@ -505,6 +537,14 @@ export class NzTestInputNumberBasicComponent {
modelChange = jasmine.createSpy('change callback');
}

@Component({
template: ` <nz-input-number [nzReadOnly]="readonly"></nz-input-number> `
})
export class NzTestReadOnlyInputNumberBasicComponent {
@ViewChild(NzInputNumberComponent, { static: false }) nzInputNumberComponent!: NzInputNumberComponent;
readonly = false;
}

@Component({
template: `
<form [formGroup]="formGroup">
Expand Down