-
Notifications
You must be signed in to change notification settings - Fork 4.1k
feat(module:input): input-wrapper supports custom count logic #9645
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.
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
Open
iaosee
wants to merge
8
commits into
NG-ZORRO:master
Choose a base branch
from
iaosee:feat/input-count
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+435
−4
Open
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
a239134
feat(module:input): input-wrapper supports custom count logic
iaosee 029fbf3
fix(module:input): do not trigger the event
iaosee cc0848e
test(module:input): update test
iaosee c0f02ca
refactor(module:input): refactor/update api and docs
iaosee d7a0016
Apply suggestion from @Copilot
HyperLife1119 154bdb7
refactor(module:input): update updateCount method
iaosee 0c50144
refactor(module:input): modify to be computed signal
iaosee 3e0998b
refactor(module:input): imporve count logic
iaosee File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Some comments aren't visible on the classic Files Changed page.
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| --- | ||
| order: 18 | ||
| title: | ||
| zh-CN: 定制计数能力 | ||
| en-US: Custom count logic | ||
| --- | ||
|
|
||
| ## zh-CN | ||
|
|
||
| 在某些场景下，需要定制计数能力（例如 emoji 长度以 1 计算），可以通过 `nzShowCount` 属性来实现。在该模式下，通过 `nzCountMax` / `nzCountStrategy` / `nzExceedFormatter` 属性来超出原生 `maxLength` 的限制。 | ||
|
|
||
| ## en-US | ||
|
|
||
| It is necessary to customize the counting ability in some scenarios (such as emoji length is counted as 1), which can be achieved through the `nzShowCount` attribute. Use `nzCountMax` / `nzCountStrategy` / `nzExceedFormatter` attribute exceeds the limit of the native `maxLength`. | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { Component, inject } from '@angular/core'; | ||
| import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; | ||
|
|
||
| import { NzFormModule } from 'ng-zorro-antd/form'; | ||
| import { NzIconModule } from 'ng-zorro-antd/icon'; | ||
| import { NzInputModule } from 'ng-zorro-antd/input'; | ||
|
|
||
| @Component({ | ||
| selector: 'nz-demo-input-advance-count', | ||
| imports: [FormsModule, ReactiveFormsModule, NzFormModule, NzInputModule, NzIconModule], | ||
HyperLife1119 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| template: ` | ||
| <form nz-form [formGroup]="form" nzLayout="vertical"> | ||
| <nz-form-item> | ||
| <nz-form-label><h4>ShowCount</h4></nz-form-label> | ||
| <nz-form-control> | ||
| <nz-input-wrapper nzAllowClear nzShowCount> | ||
| <input nz-input formControlName="test_0" /> | ||
| </nz-input-wrapper> | ||
| </nz-form-control> | ||
| </nz-form-item> | ||
| <nz-form-item> | ||
| <nz-form-label><h4>Exceed Max</h4></nz-form-label> | ||
| <nz-form-control> | ||
| <nz-input-wrapper nzShowCount [nzCountMax]="10"> | ||
| <input nz-input formControlName="test_1" /> | ||
| </nz-input-wrapper> | ||
| </nz-form-control> | ||
| </nz-form-item> | ||
| <nz-form-item> | ||
| <nz-form-label><h4>Emoji count as length 1</h4></nz-form-label> | ||
| <nz-form-control> | ||
| <nz-input-wrapper [nzShowCount]="true" [nzCountMax]="6" [nzCountStrategy]="countStrategy"> | ||
| <input nz-input formControlName="test_2" /> | ||
| </nz-input-wrapper> | ||
| </nz-form-control> | ||
| </nz-form-item> | ||
| <nz-form-item> | ||
| <nz-form-label><h4>Not exceed max</h4></nz-form-label> | ||
| <nz-form-control> | ||
| <nz-input-wrapper | ||
| nzShowCount | ||
| [nzCountMax]="10" | ||
| [nzCountStrategy]="countStrategy" | ||
| [nzExceedFormatter]="exceedFormatterFn" | ||
| > | ||
| <input nz-input formControlName="test_3" /> | ||
| </nz-input-wrapper> | ||
| </nz-form-control> | ||
| </nz-form-item> | ||
| <nz-form-item> | ||
| <nz-form-label><h4>nz-input-password</h4></nz-form-label> | ||
| <nz-form-control> | ||
| <nz-input-password | ||
| [nzVisibilityToggle]="false" | ||
| nzShowCount | ||
| [nzCountMax]="20" | ||
| [nzCountStrategy]="countStrategy" | ||
| > | ||
| <input nz-input formControlName="test_4" /> | ||
| </nz-input-password> | ||
| </nz-form-control> | ||
| </nz-form-item> | ||
| <nz-form-item> | ||
| <nz-form-label><h4>nz-input-search</h4></nz-form-label> | ||
| <nz-form-control> | ||
| <nz-input-search nzShowCount [nzCountMax]="20" [nzCountStrategy]="countStrategy"> | ||
| <input nz-input formControlName="test_5" /> | ||
| </nz-input-search> | ||
| </nz-form-control> | ||
| </nz-form-item> | ||
| </form> | ||
| ` | ||
| }) | ||
| export class NzDemoInputAdvanceCountComponent { | ||
| private fb = inject(FormBuilder); | ||
| form = this.fb.group({ | ||
| test_0: ['Angular & NG-ZORRO'], | ||
| test_1: ['Angular & NG-ZORRO'], | ||
| test_2: ['🔥🔥🔥'], | ||
| test_3: ['AAA🔥🔥🔥'], | ||
| test_4: ['BBB'], | ||
| test_5: ['CCC'] | ||
| }); | ||
|
|
||
| countStrategy: (v: string) => number = (v: string) => runes(v).length; | ||
| exceedFormatterFn: (cur: string, max: number) => string = (v: string, m: number) => { | ||
| const result = runes(v).slice(0, m).join(''); | ||
| return result; | ||
| }; | ||
| } | ||
|
|
||
| function runes(str: string): string[] { | ||
| return [...str]; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.