feat(cdk:forms): add option to remove space (#553)

packages/cdk/forms/__tests__/formControl.spec.ts

@@ -173,4 +173,36 @@ describe('formControl.ts', () => {
       expect(control.hasError('required')).toEqual(false)
     })
   })
+
+  describe('trim work', () => {
+    let control: FormControl<string>
+
+    test('default trim work', () => {
+      control = new FormControl<string>('')
+
+      expect(control.getValue()).toEqual('')
+
+      control.setValue('test ')
+
+      expect(control.getValue()).toEqual('test ')
+
+      control.setValue(' test ')
+
+      expect(control.getValue()).toEqual(' test ')
+    })
+
+    test('trim enable work', () => {
+      control = new FormControl<string>('', { trim: true })
+
+      expect(control.getValue()).toEqual('')
+
+      control.setValue('test ')
+
+      expect(control.getValue()).toEqual('test')
+
+      control.setValue(' test')
+
+      expect(control.getValue()).toEqual('test')
+    })
+  })
 })

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

@@ -91,6 +91,7 @@ export function useFormControl<T>(
 | `disabled` | 默认禁用当前控件 | `boolean` | - | - |
 | `name` | 控件的名称 | `string` | - | 通常用于自定义提示信息 |
 | `trigger` | 验证器触发的时机 | `'change' \| 'blur' \| 'submit'` | `change` | - |
+| `trim` | 是否去除首尾空字符串 | `boolean` | - | 默认不去除 |
 | `validators` | 一个同步验证器函数或数组 | `ValidatorFn \| ValidatorFn[]` | - | - |
 | `asyncValidator` | 一个异步验证器函数或数组 | `AsyncValidatorFn \| AsyncValidatorFn[]` | - | - |
 

packages/cdk/forms/src/controls.ts

@@ -20,7 +20,7 @@ import type { ComputedRef, Ref, WatchCallback, WatchOptions, WatchStopHandle } f
 
 import { computed, ref, shallowRef, watch, watchEffect } from 'vue'
 
-import { isArray, isNil, isPlainObject } from 'lodash-es'
+import { isArray, isNil, isPlainObject, isString } from 'lodash-es'
 
 import { hasOwnProperty } from '@idux/cdk/utils'
 
@@ -145,6 +145,15 @@ export abstract class AbstractControl<T = any> {
     return this._trigger ?? this._parent?.trigger ?? 'change'
   }
 
+  /**
+   * Whether to remove the first and tail space
+   * Possible value: true | false
+   * Default value: false
+   */
+  get trim(): boolean {
+    return this._trim ?? this._parent?.trim ?? false
+  }
+
   name?: string
 
   protected _controls: Ref<any>
@@ -160,6 +169,7 @@ export abstract class AbstractControl<T = any> {
   private _asyncValidators: AsyncValidatorFn | undefined
   private _parent: AbstractControl<T> | undefined
   private _trigger?: TriggerType
+  private _trim?: boolean
 
   constructor(
     controls?: GroupControls<T> | AbstractControl<ArrayElement<T>>[],
@@ -428,6 +438,7 @@ export abstract class AbstractControl<T = any> {
     if (isOptions(validatorOrOptions)) {
       this.name = validatorOrOptions.name
       this._trigger = validatorOrOptions.trigger ?? this._trigger
+      this._trim = validatorOrOptions.trim ?? this._trim
       this._validators = toValidator(validatorOrOptions.validators)
       this._asyncValidators = toAsyncValidator(validatorOrOptions.asyncValidators)
       if (validatorOrOptions.disabled) {
@@ -533,7 +544,8 @@ export class FormControl<T = any> extends AbstractControl<T> {
   }
 
   getValue(): T {
-    return this._valueRef.value
+    const value = this._valueRef.value
+    return this.trim && isString(value) ? (value as any).trim() : value;
   }
 
   protected _forEachControls(_: (v: AbstractControl, k: never) => void): void {}

packages/cdk/forms/src/types.ts

@@ -40,6 +40,7 @@ export interface ValidatorOptions {
   disabled?: boolean
   name?: string
   trigger?: TriggerType
+  trim?: boolean
   validators?: ValidatorFn | ValidatorFn[]
   asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[]
 }