Skip to content

Commit dbebd02

Browse files
HyperLife1119HyperLife1119
authored
feat(module:input-number): add affix and addon inputs (#9451)
1 parent 763f69e commit dbebd02

File tree

6 files changed

+118
-51
lines changed

6 files changed

+118
-51
lines changed

‎components/input-number/demo/addon.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
1010
selector: 'nz-demo-input-number-addon',
1111
imports: [FormsModule, NzSelectModule, NzCascaderModule, NzInputNumberModule, NzIconModule],
1212
template: `
13+
<nz-input-number nzAddonBefore="+" nzAddonAfter="$" [(ngModel)]="value" />
14+
1315
<nz-input-number [(ngModel)]="value">
1416
<span nzInputAddonBefore>+</span>
1517
<span nzInputAddonAfter>$</span>

‎components/input-number/demo/prefix.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
88
selector: 'nz-demo-input-number-prefix',
99
imports: [FormsModule, NzInputNumberModule, NzIconModule],
1010
template: `
11+
<nz-input-number nzPrefix="￥" [style.width.%]="100" />
12+
1113
<nz-input-number [style.width.%]="100">
1214
<span nzInputPrefix>￥</span>
1315
</nz-input-number>
@@ -17,9 +19,7 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
1719
<span nzInputPrefix>￥</span>
1820
</nz-input-number>
1921
20-
<nz-input-number nzDisabled [style.width.%]="100">
21-
<span nzInputPrefix>￥</span>
22-
</nz-input-number>
22+
<nz-input-number nzPrefix="￥" nzDisabled [style.width.%]="100" />
2323
`,
2424
styles: [
2525
`

‎components/input-number/doc/index.en-US.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ When a numeric value needs to be provided.
3535
| `[nzStatus]` | status, optional `error` `warning` | `'error' \| 'warning'` | - |
3636
| `[nzSize]` | input box size, optional `large` `default` `small` | `'large' \| 'small' \| 'default'` | `'default'` |
3737
| `[nzStep]` | step of each change, can be a decimal | `number` | `1` |
38+
| `[nzAddonBefore]` | The label text displayed before (on the left side of) the input-number | `string` | - |
39+
| `[nzAddonAfter]` | The label text displayed after (on the right side of) the input-number | `string` | - |
40+
| `[nzPrefix]` | The prefix icon for the input-number | `string` | - |
41+
| `[nzSuffix]` | The suffix icon for the input-number | `string` | - |
3842
| `(nzOnStep)` | callback when clicking the up and down arrows | `EventEmitter<{ value: number, offset: number, type: 'up' \| 'down' }>` | - |
3943
| `(nzFocus)` | callback when focus | `OutputRef<void>` | - |
4044
| `(nzBlur)` | callback when blur | `OutputRef<void>` | - |

‎components/input-number/doc/index.zh-CN.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,10 @@ description: 通过鼠标或键盘，输入范围内的数值。
3636
| `[nzStatus]` | 状态，可选 `error` `warning` | `'error' \| 'warning'` | - |
3737
| `[nzSize]` | 输入框大小，可选 `large` `default` `small` | `'large' \| 'small' \| 'default'` | `'default'` |
3838
| `[nzStep]` | 每次改变步数，可以是小数 | `number` | `1` |
39+
| `[nzAddonBefore]` | 带标签的 input-number，设置前置标签 | `string` | - |
40+
| `[nzAddonAfter]` | 带标签的 input-number，设置后置标签 | `string` | - |
41+
| `[nzPrefix]` | 带有前缀图标的 input-number | `string` | - |
42+
| `[nzSuffix]` | 带有后缀图标的 input-number | `string` | - |
3943
| `(nzOnStep)` | 点击上下箭头的回调 | `EventEmitter<{ value: number, offset: number, type: 'up' \| 'down' }>` | - |
4044
| `(nzFocus)` | focus 时回调 | `OutputRef<void>` | - |
4145
| `(nzBlur)` | blur 时回调 | `OutputRef<void>` | - |

‎components/input-number/input-number.component.spec.ts‎

Lines changed: 66 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -520,63 +520,75 @@ describe('input-number with affixes or addons', () => {
520520
});
521521

522522
it('should be apply affix classes', () => {
523-
expect(component.withAffixes().nativeElement.classList).toContain('ant-input-number-affix-wrapper');
523+
expect(component.withPropAffixes().nativeElement.classList).toContain('ant-input-number-affix-wrapper');
524+
expect(component.withContentAffixes().nativeElement.classList).toContain('ant-input-number-affix-wrapper');
524525
});
525526

526527
it('should be apply addon classes', () => {
527-
expect(component.withAddons().nativeElement.classList).toContain('ant-input-number-group-wrapper');
528+
expect(component.withPropAddons().nativeElement.classList).toContain('ant-input-number-group-wrapper');
529+
expect(component.withContentAddons().nativeElement.classList).toContain('ant-input-number-group-wrapper');
528530
});
529531

530532
it('should be apply mix classes', () => {
531-
expect(component.withMix().nativeElement.classList).toContain('ant-input-number-group-wrapper');
532-
expect(component.withMix().nativeElement.querySelector('.ant-input-number-affix-wrapper')).toBeTruthy();
533+
expect(component.withPropMix().nativeElement.classList).toContain('ant-input-number-group-wrapper');
534+
expect(component.withContentMix().nativeElement.classList).toContain('ant-input-number-group-wrapper');
535+
expect(component.withPropMix().nativeElement.querySelector('.ant-input-number-affix-wrapper')).toBeTruthy();
536+
expect(component.withContentMix().nativeElement.querySelector('.ant-input-number-affix-wrapper')).toBeTruthy();
533537
});
534538

535539
it('should be apply disabled class', () => {
536540
component.disabled = true;
537541
fixture.detectChanges();
538-
expect(component.withAffixes().nativeElement.classList).toContain('ant-input-number-affix-wrapper-disabled');
542+
expect(component.withContentAffixes().nativeElement.classList).toContain('ant-input-number-affix-wrapper-disabled');
539543
});
540544

541545
it('should be apply readonly class', () => {
542546
component.readonly = true;
543547
fixture.detectChanges();
544-
expect(component.withAffixes().nativeElement.classList).toContain('ant-input-number-affix-wrapper-readonly');
548+
expect(component.withContentAffixes().nativeElement.classList).toContain('ant-input-number-affix-wrapper-readonly');
545549
});
546550

547551
it('should be apply borderless class', () => {
548552
component.bordered = false;
549553
fixture.detectChanges();
550-
expect(component.withAffixes().nativeElement.classList).toContain('ant-input-number-affix-wrapper-borderless');
554+
expect(component.withContentAffixes().nativeElement.classList).toContain(
555+
'ant-input-number-affix-wrapper-borderless'
556+
);
551557
});
552558

553559
describe('should be apply nzVariant class', () => {
554560
it('filled', () => {
555561
fixture.detectChanges();
556-
expect(component.withAffixes().nativeElement.classList).not.toContain('ant-input-number-affix-wrapper-filled');
562+
expect(component.withContentAffixes().nativeElement.classList).not.toContain(
563+
'ant-input-number-affix-wrapper-filled'
564+
);
557565
component.variant = 'filled';
558566
fixture.detectChanges();
559-
expect(component.withAffixes().nativeElement.classList).toContain('ant-input-number-affix-wrapper-filled');
567+
expect(component.withContentAffixes().nativeElement.classList).toContain('ant-input-number-affix-wrapper-filled');
560568
});
561569

562570
it('borderless', () => {
563571
fixture.detectChanges();
564-
expect(component.withAffixes().nativeElement.classList).not.toContain(
572+
expect(component.withContentAffixes().nativeElement.classList).not.toContain(
565573
'ant-input-number-affix-wrapper-borderless'
566574
);
567575
component.variant = 'borderless';
568576
fixture.detectChanges();
569-
expect(component.withAffixes().nativeElement.classList).toContain('ant-input-number-affix-wrapper-borderless');
577+
expect(component.withContentAffixes().nativeElement.classList).toContain(
578+
'ant-input-number-affix-wrapper-borderless'
579+
);
570580
});
571581

572582
it('underlined', () => {
573583
fixture.detectChanges();
574-
expect(component.withAffixes().nativeElement.classList).not.toContain(
584+
expect(component.withContentAffixes().nativeElement.classList).not.toContain(
575585
'ant-input-number-affix-wrapper-borderless'
576586
);
577587
component.variant = 'underlined';
578588
fixture.detectChanges();
579-
expect(component.withAffixes().nativeElement.classList).toContain('ant-input-number-affix-wrapper-underlined');
589+
expect(component.withContentAffixes().nativeElement.classList).toContain(
590+
'ant-input-number-affix-wrapper-underlined'
591+
);
580592
});
581593
});
582594
});
@@ -637,7 +649,17 @@ class InputNumberTestComponent {
637649
imports: [NzInputNumberModule],
638650
template: `
639651
<nz-input-number
640-
#withAffixes
652+
#withPropAffixes
653+
nzPrefix="Prefix"
654+
nzSuffix="Suffix"
655+
[nzDisabled]="disabled"
656+
[nzReadOnly]="readonly"
657+
[nzBordered]="bordered"
658+
[nzVariant]="variant"
659+
/>
660+
661+
<nz-input-number
662+
#withContentAffixes
641663
[nzDisabled]="disabled"
642664
[nzReadOnly]="readonly"
643665
[nzBordered]="bordered"
@@ -648,7 +670,17 @@ class InputNumberTestComponent {
648670
</nz-input-number>
649671
650672
<nz-input-number
651-
#withAddons
673+
#withPropAddons
674+
nzAddonBefore="Before"
675+
nzAddonAfter="After"
676+
[nzDisabled]="disabled"
677+
[nzReadOnly]="readonly"
678+
[nzBordered]="bordered"
679+
[nzVariant]="variant"
680+
/>
681+
682+
<nz-input-number
683+
#withContentAddons
652684
[nzDisabled]="disabled"
653685
[nzReadOnly]="readonly"
654686
[nzBordered]="bordered"
@@ -659,7 +691,19 @@ class InputNumberTestComponent {
659691
</nz-input-number>
660692
661693
<nz-input-number
662-
#withMix
694+
#withPropMix
695+
nzPrefix="Prefix"
696+
nzSuffix="Suffix"
697+
nzAddonBefore="Before"
698+
nzAddonAfter="After"
699+
[nzDisabled]="disabled"
700+
[nzReadOnly]="readonly"
701+
[nzBordered]="bordered"
702+
[nzVariant]="variant"
703+
/>
704+
705+
<nz-input-number
706+
#withContentMix
663707
[nzDisabled]="disabled"
664708
[nzReadOnly]="readonly"
665709
[nzBordered]="bordered"
@@ -678,7 +722,10 @@ class InputNumberWithAffixesAndAddonsTestComponent {
678722
bordered = true;
679723
variant: NzVariant = 'outlined';
680724

681-
withAffixes = viewChild.required('withAffixes', { read: ElementRef });
682-
withAddons = viewChild.required('withAddons', { read: ElementRef });
683-
withMix = viewChild.required('withMix', { read: ElementRef });
725+
readonly withPropAffixes = viewChild.required('withPropAffixes', { read: ElementRef });
726+
readonly withContentAffixes = viewChild.required('withContentAffixes', { read: ElementRef });
727+
readonly withPropAddons = viewChild.required('withPropAddons', { read: ElementRef });
728+
readonly withContentAddons = viewChild.required('withContentAddons', { read: ElementRef });
729+
readonly withPropMix = viewChild.required('withPropMix', { read: ElementRef });
730+
readonly withContentMix = viewChild.required('withContentMix', { read: ElementRef });
684731
}

0 commit comments

Comments
 (0)