[cdk: forms]: reactive forms system

[danranVm]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

参考自 @angular/forms

特性

• 显示创建表单模型: useFormGroup, useFormArray, useFormControl
• 易扩展的表单验证: Validators
• 响应式的表单状态: valid, invalid, validating, blurred, unblurred

API

示例

<template>
  <ix-form :control="group">
    Name: <ix-input control="name" /> <br />
    Age: <ix-input control="age" /> <br />
    Email: <ix-input control="email" />
  </ix-form>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { injectControl, provideControl, Validators, useFormGroup } from '@idux/cdk/forms'

const IxForm = defineComponent({
  props: ['control'],
  setup(props) {
    provideControl(props.control)
  },
  template: `<form><slot /></form>`,
})

const IxInput = defineComponent({
  props: ['control'],
  setup(props) {
    const control$ = injectControl(props.control)!

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const onChange = (evt: any) => {
      control$.setValue(evt.target!.value, { dirty: true })
    }

    return { control$, onChange }
  },
  template: `<input :value="control$.valueRef.value" @input="onChange" @blur="control$.markAsBlurred()" />`,
})

export default defineComponent({
  components: { IxForm, IxInput },
  setup() {
    const { required, min, max, minLength, maxLength } = Validators
    const group = useFormGroup({
      name: ['tom', required],
      age: [18, [required, min(1), max(99)]],
      email: ['', [minLength(8), maxLength(40)]],
    })

    group.watchValue(value => console.log(value))
    group.watchStatus(stats => console.log(stats))

    group.get('name')?.watchStatus(stats => console.log(stats))

    return { group }
  },
})
</script>

后续支持

• useFormAccessor： 注册表单控制器

  • onChange(fn: any): void // 注册 onChange 事件。
    onTouched(fn: any): void // 注册 onTouched 事件

• useValidators: 注册同步验证器 (自定义业务表单组件需要)

  • validate(value: any): ValidationErrors | null // 自定义验证函数
    onValidatorChange?(fn: () => void): void // 注册验证状态改变的事件 可选实现

• useAsyncValidators：注册异步验证器 (自定义业务表单组件需要)

  • validate(value: any): Promise<ValidationErrors | null> // 自定义验证函数
    onValidatorChange?(fn: () => void): void // 注册验证状态改变的事件 可选实现

[danranVm]

@coolyuantao @hele10086 负责此组件的 review， API 设计完成后请 @ 他们

[zymoplastic]

touch 令人想到触摸屏的 touchEvent, 但是这里的语义应该是 blur, 我们组件库不支持手机端, 能否考虑换个名字

[danranVm]

收到几个疑问：

• Validators 这里的校验不通过后的提示信息是否放在required, min,max内部约定好，是否可配置？
• useFormGroup这里的函数的声明是怎样的？（这里会有自定义的validator）
• 是否要支持指令的形式，比如 ix-input v-model="xxx" :rules="[min(0), max(100)]" />
• 需要有关于一些统一的错误提示方式的配置吧？

回复：

• 内部约定好，可以配置和扩展
• 只要是符合我们 Validator 类型声明的函数，就可以传到 useFormGroup 中，大概的类型就是 (value)=> ValidMessage | null 这种格式
• 这个暂时先不支持吧，后面可以加上来，而且这个是要每个组件都去实现 rules 这个 API 的，跟我CDK 的关系可能不是很大，最多我提供一个注册 rules 的API
• 这个肯定是有的，也是在具体的 form 组件去是实现， CDK 里暂不考虑。。