diff --git a/components/input-number/demo/borderless.md b/components/input-number/demo/borderless.md
new file mode 100644
index 0000000000..4f3ea028a8
--- /dev/null
+++ b/components/input-number/demo/borderless.md
@@ -0,0 +1,15 @@
+---
+order: 0
+title:
+ zh-CN: 无边框
+ en-US: Borderless
+---
+
+## zh-CN
+
+没有边框。
+
+## en-US
+
+Borderless input number.
+
diff --git a/components/input-number/demo/borderless.ts b/components/input-number/demo/borderless.ts
new file mode 100644
index 0000000000..2cd6a01da1
--- /dev/null
+++ b/components/input-number/demo/borderless.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-input-number-borderless',
+ template: ` `
+})
+export class NzDemoInputNumberBorderlessComponent {
+ demoValue = 3;
+}
diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts
index 1b5e7e2c63..8850895b63 100644
--- a/components/input-number/input-number.component.ts
+++ b/components/input-number/input-number.component.ts
@@ -109,13 +109,15 @@ import { getStatusClassNames, InputBoolean, isNotNil } from 'ng-zorro-antd/core/
'[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'`
+ '[class.ant-input-number-rtl]': `dir === 'rtl'`,
+ '[class.ant-input-number-borderless]': `nzBorderless`
}
})
export class NzInputNumberComponent implements ControlValueAccessor, AfterViewInit, OnChanges, OnInit, OnDestroy {
static ngAcceptInputType_nzDisabled: BooleanInput;
static ngAcceptInputType_nzReadOnly: BooleanInput;
static ngAcceptInputType_nzAutoFocus: BooleanInput;
+ static ngAcceptInputType_nzBorderless: BooleanInput;
private autoStepTimer?: number;
private parsedValue?: string | number;
@@ -133,6 +135,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
hasFeedback: boolean = false;
onChange: OnChangeType = () => {};
onTouched: OnTouchedType = () => {};
+
@Output() readonly nzBlur = new EventEmitter();
@Output() readonly nzFocus = new EventEmitter();
/** The native `` element. */
@@ -159,6 +162,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
@Input() @InputBoolean() nzDisabled = false;
@Input() @InputBoolean() nzReadOnly = false;
@Input() @InputBoolean() nzAutoFocus = false;
+ @Input() @InputBoolean() nzBorderless: boolean = false;
@Input() nzFormatter: (value: number) => string | number = value => value;
onModelChange(value: string): void {
diff --git a/components/input-number/input-number.spec.ts b/components/input-number/input-number.spec.ts
index 89045e334f..92cb099918 100644
--- a/components/input-number/input-number.spec.ts
+++ b/components/input-number/input-number.spec.ts
@@ -63,6 +63,13 @@ describe('input number', () => {
expect(inputNumber.nativeElement.classList).toContain('ant-input-number');
expect(inputElement.getAttribute('placeholder')).toBe('placeholder');
});
+ it('should border work', () => {
+ fixture.detectChanges();
+ expect(inputNumber.nativeElement!.classList).not.toContain('ant-input-number-borderless');
+ testComponent.bordered = false;
+ fixture.detectChanges();
+ expect(inputNumber.nativeElement!.classList).toContain('ant-input-number-borderless');
+ });
it('should focus className correct', fakeAsync(() => {
fixture.detectChanges();
expect(inputNumber.nativeElement.classList).toContain('ng-untouched');
@@ -608,6 +615,7 @@ describe('input number', () => {
[nzParser]="parser"
[nzPrecision]="precision"
[nzPrecisionMode]="precisionMode"
+ [nzBorderless]="!bordered"
>
`
})
@@ -621,6 +629,7 @@ export class NzTestInputNumberBasicComponent {
size = 'default';
placeholder = 'placeholder';
step = 1;
+ bordered = true;
precision?: number = 2;
precisionMode?: 'cut' | 'toFixed' | ((value: number | string, precision?: number) => number);
formatter = (value: number): string => (value !== null ? `${value}` : '');