Skip to content

Commit a8e56ec

Browse files
HyperLife1119HyperLife1119
authored
feat(module:input): introduce new component nz-input-wrapper (#9408)
Base on #9403 The API shape of `input-wrapper` is similar to the new `input-number`. This component will also unlock new features like `Input.Search`, `Input.Password`, `showCount`, and `allowClear`... - Deprecated `nz-input-group` - Deprecated `NzFormNoStatusService` - Support use with `nz-space-compact`
1 parent cef5fdb commit a8e56ec

37 files changed

+704
-123
lines changed

‎.stylelintrc.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,8 @@
5656
"plugin"
5757
]
5858
}
59-
]
59+
],
60+
"less/no-duplicate-variables": null
6061
},
6162
"ignoreFiles": [
6263
"components/style/color/{bezierEasing,colorPalette,tinyColor}.less"

‎components/core/form/nz-form-no-status.service.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import { Injectable } from '@angular/core';
77
import { BehaviorSubject } from 'rxjs';
88

99
// Used in input-group/input-number-group to make sure components in addon work well
10+
/**
11+
* @deprecated Will be removed in v22.0.0. This service will be removed along with input-group/input-number-group.
12+
*/
1013
@Injectable()
1114
export class NzFormNoStatusService {
1215
noFormStatus = new BehaviorSubject<boolean>(false);

‎components/input/demo/addon.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 2
2+
order: 3
33
title:
44
zh-CN: 前置/后置标签
55
en-US: Pre / Post tab

‎components/input/demo/addon.ts‎

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,56 @@
1-
import { Component } from '@angular/core';
1+
import { Component, signal } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
33

4+
import { NzCascaderModule } from 'ng-zorro-antd/cascader';
5+
import { NzIconModule } from 'ng-zorro-antd/icon';
46
import { NzInputModule } from 'ng-zorro-antd/input';
57
import { NzSelectModule } from 'ng-zorro-antd/select';
68

79
@Component({
810
selector: 'nz-demo-input-addon',
9-
imports: [FormsModule, NzInputModule, NzSelectModule],
11+
imports: [NzInputModule, NzIconModule, NzSelectModule, NzCascaderModule, FormsModule],
1012
template: `
11-
<nz-input-group nzAddOnBefore="Http://" nzAddOnAfter=".com">
12-
<input type="text" nz-input [(ngModel)]="inputValue" />
13-
</nz-input-group>
13+
<nz-input-wrapper>
14+
<span nzInputAddonBefore>http://</span>
15+
<input nz-input [(ngModel)]="value" />
16+
<span nzInputAddonAfter>.com</span>
17+
</nz-input-wrapper>
1418
<br />
1519
<br />
16-
<nz-input-group [nzAddOnBefore]="addOnBeforeTemplate" [nzAddOnAfter]="addOnAfterTemplate">
17-
<input type="text" nz-input [(ngModel)]="inputValue" />
18-
</nz-input-group>
19-
<ng-template #addOnBeforeTemplate>
20-
<nz-select [ngModel]="'Http://'">
20+
<nz-input-wrapper>
21+
<nz-select nzInputAddonBefore [ngModel]="'Http://'">
2122
<nz-option nzLabel="Http://" nzValue="Http://"></nz-option>
2223
<nz-option nzLabel="Https://" nzValue="Https://"></nz-option>
2324
</nz-select>
24-
</ng-template>
25-
<ng-template #addOnAfterTemplate>
26-
<nz-select [ngModel]="'.com'">
25+
<input nz-input [(ngModel)]="value" />
26+
<nz-select nzInputAddonAfter [ngModel]="'.com'">
2727
<nz-option nzLabel=".com" nzValue=".com"></nz-option>
2828
<nz-option nzLabel=".jp" nzValue=".jp"></nz-option>
2929
<nz-option nzLabel=".cn" nzValue=".cn"></nz-option>
3030
<nz-option nzLabel=".org" nzValue=".org"></nz-option>
3131
</nz-select>
32-
</ng-template>
32+
</nz-input-wrapper>
3333
<br />
3434
<br />
35-
<nz-input-group nzAddOnAfterIcon="setting">
36-
<input type="text" nz-input [(ngModel)]="inputValue" />
37-
</nz-input-group>
35+
<nz-input-wrapper>
36+
<input nz-input [(ngModel)]="value" />
37+
<nz-icon nzInputAddonBefore nzType="setting" />
38+
</nz-input-wrapper>
39+
<br />
40+
<br />
41+
<nz-input-wrapper>
42+
<span nzInputAddonBefore>http://</span>
43+
<input nz-input [(ngModel)]="value" />
44+
<span nzInputSuffix>.com</span>
45+
</nz-input-wrapper>
46+
<br />
47+
<br />
48+
<nz-input-wrapper>
49+
<nz-cascader nzInputAddonBefore [nzOptions]="[]" nzPlaceHolder="cascader" [style.width.px]="150" />
50+
<input nz-input [(ngModel)]="value" />
51+
</nz-input-wrapper>
3852
`
3953
})
4054
export class NzDemoInputAddonComponent {
41-
inputValue: string = 'my site';
55+
readonly value = signal('mysite');
4256
}

‎components/input/demo/allow-clear.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 11
2+
order: 12
33
title:
44
zh-CN: 带移除图标
55
en-US: With clear icon

‎components/input/demo/allow-clear.ts‎

Lines changed: 21 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,30 @@ import { NzInputModule } from 'ng-zorro-antd/input';
88
selector: 'nz-demo-input-allow-clear',
99
imports: [FormsModule, NzInputModule, NzIconModule],
1010
template: `
11-
<nz-input-group [nzSuffix]="inputClearTpl">
12-
<input type="text" nz-input [(ngModel)]="inputValue" placeholder="input with clear icon" />
13-
</nz-input-group>
14-
<ng-template #inputClearTpl>
15-
@if (inputValue) {
16-
<nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="inputValue = null" />
17-
}
18-
</ng-template>
11+
<nz-input-wrapper nzAllowClear>
12+
<input nz-input [(ngModel)]="inputValue" placeholder="input with clear icon" />
13+
<nz-icon
14+
nzInputSuffix
15+
class="ant-input-clear-icon"
16+
nzType="close-circle"
17+
nzTheme="fill"
18+
[hidden]="!inputValue"
19+
(click)="inputValue = null"
20+
/>
21+
</nz-input-wrapper>
1922
<br />
2023
<br />
21-
<nz-input-group [nzSuffix]="textAreaClearTpl" class="ant-input-affix-wrapper-textarea-with-clear-btn">
24+
<nz-input-wrapper nzAllowClear class="ant-input-affix-wrapper-textarea-with-clear-btn">
2225
<textarea nz-input [(ngModel)]="textValue" placeholder="textarea with clear icon"></textarea>
23-
</nz-input-group>
24-
<ng-template #textAreaClearTpl>
25-
@if (textValue) {
26-
<nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" (click)="textValue = null" />
27-
}
28-
</ng-template>
26+
<nz-icon
27+
nzInputSuffix
28+
class="ant-input-clear-icon"
29+
nzType="close-circle"
30+
nzTheme="fill"
31+
[hidden]="!textValue"
32+
(click)="inputValue = null"
33+
/>
34+
</nz-input-wrapper>
2935
`
3036
})
3137
export class NzDemoInputAllowClearComponent {

‎components/input/demo/autosize-textarea.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
order: 6
2+
order: 7
33
title:
44
zh-CN: 适应文本高度的文本域
55
en-US: Autosizing the height to fit the content

‎components/input/demo/basic.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,7 @@ import { NzInputModule } from 'ng-zorro-antd/input';
66
@Component({
77
selector: 'nz-demo-input-basic',
88
imports: [FormsModule, NzInputModule],
9-
template: `
10-
<input nz-input placeholder="Basic usage" [(ngModel)]="value" type="number" />
11-
<br />
12-
<br />
13-
<input nz-input placeholder="Basic usage" [(ngModel)]="value" [disabled]="true" />
14-
`
9+
template: ` <input nz-input placeholder="Basic usage" [(ngModel)]="value" /> `
1510
})
1611
export class NzDemoInputBasicComponent {
1712
value?: string;

‎components/input/demo/compact.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
order: 4
3+
title:
4+
zh-CN: 紧凑模式
5+
en-US: Compact Style
6+
---
7+
8+
## zh-CN
9+
10+
使用 `<nz-space-compact>` 创建紧凑模式，更多请查看[文档](/components/space/zh#nz-space-compact)。
11+
12+
## en-US
13+
14+
Use `<nz-space-compact>` create compact style, See the [documentation](/components/space/en#nz-space-compact) for more.

‎components/input/demo/compact.ts‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { Component } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
3+
4+
import { NzButtonModule } from 'ng-zorro-antd/button';
5+
import { NzIconModule } from 'ng-zorro-antd/icon';
6+
import { NzInputModule } from 'ng-zorro-antd/input';
7+
import { NzSelectModule, NzSelectOptionInterface } from 'ng-zorro-antd/select';
8+
import { NzSpaceModule } from 'ng-zorro-antd/space';
9+
10+
@Component({
11+
selector: 'nz-demo-input-compact',
12+
imports: [NzInputModule, NzIconModule, NzSelectModule, NzSpaceModule, NzButtonModule, FormsModule],
13+
template: `
14+
<nz-space-compact>
15+
<input nz-input value="26888888" />
16+
</nz-space-compact>
17+
<br />
18+
<br />
19+
<nz-space-compact>
20+
<input nz-input value="0571" [style.width.%]="20" />
21+
<input nz-input value="26888888" [style.width.%]="80" />
22+
</nz-space-compact>
23+
<br />
24+
<br />
25+
<nz-space-compact>
26+
<nz-input-wrapper class="ant-input-search">
27+
<span nzInputAddonBefore>https://</span>
28+
<input nz-input type="search" placeholder="input search text" />
29+
<button nzInputAddonAfter nz-button class="ant-input-search-button">
30+
<nz-icon nzType="search" />
31+
</button>
32+
</nz-input-wrapper>
33+
</nz-space-compact>
34+
<br />
35+
<br />
36+
<nz-space-compact [style.width.%]="100">
37+
<input nz-input placeholder="Combine input and button" />
38+
<button nz-button nzType="primary">Submit</button>
39+
</nz-space-compact>
40+
<br />
41+
<br />
42+
<nz-space-compact>
43+
<nz-select [ngModel]="'zhejiang'" [nzOptions]="options" />
44+
<input nz-input placeholder="Xihu District, Hangzhou" />
45+
</nz-space-compact>
46+
<br />
47+
<br />
48+
<nz-space-compact nzSize="large">
49+
<nz-input-wrapper>
50+
<nz-icon nzInputAddonBefore nzType="search" />
51+
<input nz-input placeholder="large size" />
52+
</nz-input-wrapper>
53+
<input nz-input placeholder="another input" />
54+
</nz-space-compact>
55+
`
56+
})
57+
export class NzDemoInputCompactComponent {
58+
options: NzSelectOptionInterface[] = [
59+
{
60+
value: 'zhejiang',
61+
label: 'Zhejiang'
62+
},
63+
{
64+
value: 'jiangsu',
65+
label: 'Jiangsu'
66+
}
67+
];
68+
}

0 commit comments

Comments
 (0)