Skip to content
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

refactor(comp:form): api redesign and add test #763

Merged
merged 1 commit into from
Feb 23, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/cdk/forms/docs/Index.zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export function useFormArray<T>(
| --- | --- | --- | --- | --- |
| `config` | 控件数组配置项 | `ArrayConfig<T>` | - | 每个子控件的 `key` 就是配置项的 `index` |
| `validators` | 一个同步验证器函数或数组 | `ValidatorFn \| ValidatorFn[]` | - | 只针对当前控件数组的值进行验证 |
| `asyncValidator` | 一个异步验证器函数或数组 | `AsyncValidatorFn \| AsyncValidatorFn[]` | - | 只针对当前控件数组的值进行验证 |
| `asyncValidators` | 一个异步验证器函数或数组 | `AsyncValidatorFn \| AsyncValidatorFn[]` | - | 只针对当前控件数组的值进行验证 |
| `validatorOptions` | 控件数组验证配置项 | `ValidatorOptions` | - | 参见[ValidatorOptions](#ValidatorOptions) |

```ts
Expand Down Expand Up @@ -93,7 +93,7 @@ export function useFormControl<T>(
| `trigger` | 验证器触发的时机 | `'change' \| 'blur' \| 'submit'` | `change` | - |
| `trim` | 是否去除首尾空字符串 | `boolean` | - | 默认不去除 |
| `validators` | 一个同步验证器函数或数组 | `ValidatorFn \| ValidatorFn[]` | - | - |
| `asyncValidator` | 一个异步验证器函数或数组 | `AsyncValidatorFn \| AsyncValidatorFn[]` | - | - |
| `asyncValidators` | 一个异步验证器函数或数组 | `AsyncValidatorFn \| AsyncValidatorFn[]` | - | - |

### Validators

Expand Down
120 changes: 120 additions & 0 deletions packages/components/form/__tests__/__snapshots__/form.spec.ts.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Form basic work render work 1`] = `
"<form class=\\"ix-form ix-form-horizontal ix-form-md\\">
<div class=\\"ix-row ix-form-item\\">
<div class=\\"ix-col ix-form-item-label ix-form-item-label-colon\\"><label>Username
<!---->
</label></div>
<div class=\\"ix-col ix-form-item-control\\">
<div class=\\"ix-form-item-control-input\\">
<div class=\\"ix-form-item-control-input-content\\"><input class=\\"ix-input ix-input-md\\"></div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class=\\"ix-row ix-form-item\\">
<div class=\\"ix-col ix-form-item-label ix-form-item-label-colon\\"><label>Password
<!---->
</label></div>
<div class=\\"ix-col ix-form-item-control\\">
<div class=\\"ix-form-item-control-input\\">
<div class=\\"ix-form-item-control-input-content\\"><input class=\\"ix-input ix-input-md\\"></div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class=\\"ix-row ix-form-item\\">
<div class=\\"ix-col ix-form-item-label ix-form-item-label-colon\\"><label>Remember
<!---->
</label></div>
<div class=\\"ix-col ix-form-item-control\\">
<div class=\\"ix-form-item-control-input\\">
<div class=\\"ix-form-item-control-input-content\\"><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
<!---->
<!---->
</label></div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class=\\"ix-row ix-form-item\\">
<!---->
<div class=\\"ix-col ix-form-item-control\\">
<div class=\\"ix-form-item-control-input\\">
<div class=\\"ix-form-item-control-input-content\\"><button class=\\"ix-button ix-button-md\\" type=\\"button\\"><span>Click</span></button></div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
</form>"
`;

exports[`Form item work render work 1`] = `
"<div class=\\"ix-row ix-form-item\\">
<div class=\\"ix-col ix-form-item-label ix-form-item-label-colon\\"><label>Username
<!---->
</label></div>
<div class=\\"ix-col ix-form-item-control\\">
<div class=\\"ix-form-item-control-input\\">
<div class=\\"ix-form-item-control-input-content\\"><input class=\\"ix-input ix-input-md\\"></div>
<!---->
</div>
<!---->
<!---->
</div>
</div>"
`;

exports[`Form wrapper work render work 1`] = `
"<div class=\\"ix-row ix-form-item\\">
<div class=\\"ix-col ix-form-item-label ix-form-item-label-colon\\"><label>Username
<!---->
</label></div>
<div class=\\"ix-col ix-form-item-control\\">
<div class=\\"ix-form-item-control-input\\">
<div class=\\"ix-form-item-control-input-content\\"><input class=\\"ix-input ix-input-md\\"></div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class=\\"ix-row ix-form-item\\">
<div class=\\"ix-col ix-col-span-6 ix-form-item-label ix-form-item-label-colon\\"><label>Password
<!---->
</label></div>
<div class=\\"ix-col ix-form-item-control\\">
<div class=\\"ix-form-item-control-input\\">
<div class=\\"ix-form-item-control-input-content\\"><input class=\\"ix-input ix-input-md\\"></div>
<!---->
</div>
<!---->
<!---->
</div>
</div>
<div class=\\"ix-row ix-form-item\\">
<div class=\\"ix-col ix-col-span-8 ix-form-item-label ix-form-item-label-colon\\"><label>Remember
<!---->
</label></div>
<div class=\\"ix-col ix-form-item-control\\">
<div class=\\"ix-form-item-control-input\\">
<div class=\\"ix-form-item-control-input-content\\"><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
<!---->
<!---->
</label></div>
<!---->
</div>
<!---->
<!---->
</div>
</div>"
`;
Loading