Skip to content

Commit e742e39

Browse files
ParsaArvanehPAParsaArvanehPA
authored
feat(module:form): support standalone component (#8252)
1 parent 138d666 commit e742e39

13 files changed

Lines changed: 107 additions & 114 deletions

‎components/form/doc/index.en-US.md‎

Lines changed: 40 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,15 @@ You can align the controls of a `form` using the `layout` prop：
2020
- `vertical`：to vertically align the `label`s and controls of the fields.
2121
- `inline`：to render form fields in one line.
2222

23-
### nz-form-item
23+
### nz-form-item:standalone
2424

2525
Used to separate the item in forms, contains label(optional) and control field.
2626

27-
### nz-form-label
27+
### nz-form-label:standalone
2828

2929
The label of the form item, optional.
3030

31-
### nz-form-control
31+
### nz-form-control:standalone
3232

3333
A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.
3434

@@ -37,9 +37,9 @@ A form consists of one or more form fields whose type includes input, textarea,
3737
<nz-form-item>
3838
<nz-form-label [nzSpan]="6" nzFor="email">E-mail</nz-form-label>
3939
<nz-form-control [nzSpan]="14">
40-
<input nz-input name="email" type="email" id="email">
40+
<input nz-input name="email" type="email" id="email" />
4141
</nz-form-control>
42-
</nz-form-item >
42+
</nz-form-item>
4343
</form>
4444
```
4545

@@ -49,66 +49,64 @@ import { NzFormModule } from 'ng-zorro-antd/form';
4949

5050
## API
5151

52-
### [nz-form]
52+
### [nz-form]:standalone
5353

54-
| Property | Description | Type | Default Value | Global Config |
55-
| -------- | ----------- | ---- | ------------- | ------------- |
56-
| `[nzLayout]`| Form layout | `'horizontal' \| 'vertical' \| 'inline'` | `'horizontal'` |
57-
| `[nzAutoTips]`| Set default props `[nzAutoTips]` value of `nz-form-control`, please refer to the example: **Auto tips** | `Record<string, Record<string, string>>` | `{}` | ✅ |
58-
| `[nzDisableAutoTips]`| Set default props `[nzDisableAutoTip]` value of `nz-form-control` | `boolean` | `false` | ✅ |
59-
| `[nzNoColon]`| Set default props `[nzNoColon]` value of `nz-form-label` | `boolean` | `false` | ✅ |
60-
| `[nzTooltipIcon]`| Set default props `[nzTooltipIcon]` value of `nz-form-label` | `string \| { type: string; theme: ThemeType }` | `{ type: 'question-circle', theme: 'outline' }` | ✅ |
61-
| `[nzLabelAlign]`| Set default props `[nzLabelAlign]` value of `nz-form-label` | `'left' \| 'right'` | `'right'` |
62-
| `[nzLabelWrap]`| Set default props `[nzLabelWrap]` value of `nz-form-label` | `boolean` | `false` |
54+
| Property | Description | Type | Default Value | Global Config |
55+
| --------------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------------------------------------------- | ------------- |
56+
| `[nzLayout]` | Form layout | `'horizontal' \| 'vertical' \| 'inline'` | `'horizontal'` |
57+
| `[nzAutoTips]` | Set default props `[nzAutoTips]` value of `nz-form-control`, please refer to the example: **Auto tips** | `Record<string, Record<string, string>>` | `{}` | ✅ |
58+
| `[nzDisableAutoTips]` | Set default props `[nzDisableAutoTip]` value of `nz-form-control` | `boolean` | `false` | ✅ |
59+
| `[nzNoColon]` | Set default props `[nzNoColon]` value of `nz-form-label` | `boolean` | `false` | ✅ |
60+
| `[nzTooltipIcon]` | Set default props `[nzTooltipIcon]` value of `nz-form-label` | `string \| { type: string; theme: ThemeType }` | `{ type: 'question-circle', theme: 'outline' }` | ✅ |
61+
| `[nzLabelAlign]` | Set default props `[nzLabelAlign]` value of `nz-form-label` | `'left' \| 'right'` | `'right'` |
62+
| `[nzLabelWrap]` | Set default props `[nzLabelWrap]` value of `nz-form-label` | `boolean` | `false` |
6363

64-
65-
### nz-form-item
64+
### nz-form-item:standalone
6665

6766
Used to separate the item in forms, contains label(optional) and control field.
6867

6968
> All api in [nz-row](/components/grid/zh) can be used in `nz-form-item`.
7069
71-
### nz-form-label
70+
### nz-form-label:standalone
7271

7372
The label of the form item, optional.
7473

7574
> All api in [nz-col](/components/grid/zh) can be used in `nz-form-label`.
7675
77-
| Property | Description | Type | Default Value |
78-
| --- | --- | --- | --- |
79-
| `[nzRequired]`| add required style to current item | `boolean` | `false` |
80-
| `[nzNoColon]`| whether to not display `:` after label text. | `boolean` | `false` |
81-
| `[nzFor]`| The `for` property of `label` | `string` | - |
82-
| `[nzTooltipTitle]`| Set tooltip info | `string \| TemplateRef<void>` | - |
83-
| `[nzTooltipIcon]`| Set icon of tooltip info | `string \| NzFormTooltipIcon` | - |
84-
| `[nzLabelAlign]`| The text align of label | `'left' \| 'right'` | `'right'` |
85-
| `[nzLabelWrap]`| whether label can be wrap | `boolean` | `false` |
76+
| Property | Description | Type | Default Value |
77+
| ------------------ | -------------------------------------------- | ----------------------------- | ------------- |
78+
| `[nzRequired]` | add required style to current item | `boolean` | `false` |
79+
| `[nzNoColon]` | whether to not display `:` after label text. | `boolean` | `false` |
80+
| `[nzFor]` | The `for` property of `label` | `string` | - |
81+
| `[nzTooltipTitle]` | Set tooltip info | `string \| TemplateRef<void>` | - |
82+
| `[nzTooltipIcon]` | Set icon of tooltip info | `string \| NzFormTooltipIcon` | - |
83+
| `[nzLabelAlign]` | The text align of label | `'left' \| 'right'` | `'right'` |
84+
| `[nzLabelWrap]` | whether label can be wrap | `boolean` | `false` |
8685

86+
### nz-form-control:standalone
8787

88-
### nz-form-control
8988
> Note：Due to the lack of partial Observable in [Angular Form](https://github.com/angular/angular/issues/10887), you have to notify `nz-form-control` to update its status with `updateValueAndValidity` when you update form status using methods like `markAsDirty`.
9089
9190
A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.
9291

9392
> All api in [nz-col](/components/grid/zh) can be used in `nz-form-control`.
9493
95-
| Property | Description | Type | Default Value |
96-
| --- | --- | --- | --- |
97-
| `[nzValidateStatus]` | Will generate status based on the input `FormControl`, `NgModel` or string, the default value is the first `FormControl` or `NgModel` in `nz-form-control` | `'success' \| 'warning' \| 'error' \| 'validating' \| FormControl \| NgModel` | first `FormControl` or `NgModel` in `nz-form-control` |
98-
| `[nzHasFeedback]`| Used with `nzValidateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | `boolean` | `false` |
99-
| `[nzExtra]`| The extra prompt message | `string \| TemplateRef<void>` | - |
100-
| `[nzSuccessTip]`| Tip display when validate success | `string \| TemplateRef<{ $implicit: FormControl \| NgModel }>` | - |
101-
| `[nzWarningTip]`| Tip display when validate warning | `string \| TemplateRef<{ $implicit: FormControl \| NgModel }>` | - |
102-
| `[nzErrorTip]`| Tip display when validate error | `string \| TemplateRef<{ $implicit: FormControl \| NgModel }>` | - |
103-
| `[nzValidatingTip]`| Tip display when validating | `string \| TemplateRef<{ $implicit: FormControl \| NgModel }>` | - |
104-
| `[nzAutoTips]`| The object of the tips, please refer to the example: **Auto tips** | `Record<string, string \| Record<string, string>>` | - | - |
105-
| `[nzDisableAutoTips]`| Disable Auto Tips | `boolean` | - | - |
94+
| Property | Description | Type | Default Value |
95+
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------- | --- |
96+
| `[nzValidateStatus]` | Will generate status based on the input `FormControl`, `NgModel` or string, the default value is the first `FormControl` or `NgModel` in `nz-form-control` | `'success' \| 'warning' \| 'error' \| 'validating' \| FormControl \| NgModel` | first `FormControl` or `NgModel` in `nz-form-control` |
97+
| `[nzHasFeedback]` | Used with `nzValidateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | `boolean` | `false` |
98+
| `[nzExtra]` | The extra prompt message | `string \| TemplateRef<void>` | - |
99+
| `[nzSuccessTip]` | Tip display when validate success | `string \| TemplateRef<{ $implicit: FormControl \| NgModel }>` | - |
100+
| `[nzWarningTip]` | Tip display when validate warning | `string \| TemplateRef<{ $implicit: FormControl \| NgModel }>` | - |
101+
| `[nzErrorTip]` | Tip display when validate error | `string \| TemplateRef<{ $implicit: FormControl \| NgModel }>` | - |
102+
| `[nzValidatingTip]` | Tip display when validating | `string \| TemplateRef<{ $implicit: FormControl \| NgModel }>` | - |
103+
| `[nzAutoTips]` | The object of the tips, please refer to the example: **Auto tips** | `Record<string, string \| Record<string, string>>` | - | - |
104+
| `[nzDisableAutoTips]` | Disable Auto Tips | `boolean` | - | - |
106105

107-
### nz-form-split
106+
### nz-form-split:standalone
108107

109108
The split icon of `-`
110109

111-
### nz-form-text
110+
### nz-form-text:standalone
112111

113112
Text in `nz-form-control`
114-

0 commit comments

Comments
 (0)