[cdk:forms] 如何实现一个内置验证器的组件？

[danranVm]

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

What problem does this feature solve?

可以让组件内置一些验证器：例如，IP 输入框

What does the proposed API look like?

AbstractControl 新增了多个设置验证器的函数，可以在组件内部灵活的设置验证器，例如：

<template>
  <input class="ip-input" :value="accessor.value" :disabled="accessor.disabled" @blur="onBlur" @input="onInput" />
</template>

<script setup lang="ts">
import { watchEffect } from 'vue'
import { type ValidatorFn, useAccessorAndControl } from '@idux/cdk/forms'

defineProps<{
  control?: string | number | (string | number)[] | object
  disabled?: boolean
  value?: string
}>()

const { accessor, control: controlRef } = useAccessorAndControl()

const v4IPExp = /^(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)){3}$/
const ipValidator: ValidatorFn = (value: string) => {
  if (!value || v4IPExp.test(value)) {
    return undefined
  }
  return { ip: { message: 'IP address is not valid!' } }
}

watchEffect(() => {
  const currControl = controlRef.value
  if (currControl) {
    currControl.addValidators(ipValidator)
  }
})
</script>

[idux-bot]

Translation of this issue:

[CDK: Forms] How to implement a component of a built -in verification device?

• I have searched the [issues] (https://github.com/iduxfe/idux/isSues) of this repository that this is not a duplicate.

What PROBLEM DOES This Feature Solve?

You can make the component built -in some verification device: for example, the IP input box

What does the proposed api look like?

Refer to the two token of Angular?
-Ng_validators
-NG_ASYNC_VALIDAM