refactor(comp:form): api redesign

BREAKING CHANGE: `hasFeedback` was deprecated, please use `statusIcon` instead.  `extra` was
deprecated, please use `extraMessage` instead.

packages/cdk/forms/docs/Index.zh.md

@@ -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
@@ -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
 

packages/components/form/__tests__/__snapshots__/form.spec.ts.snap

@@ -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>"
+`;