[RMBWEB-2780] Support for structured validation results

dumi/docs/concepts/state/index.md

@@ -29,7 +29,7 @@ export interface IState<V> {
   error: ValidationError
   /** The state's own error info, regardless of child states. */
   ownError: ValidationError
-  /** The state's validation result, is the same as the return value of the validator, regardless of child states. */
+  /** The state's validation result, regardless of child states. */
   rawError: ValidationResult
   /** Append validator(s). */
   withValidator(...validators: Array<Validator<V>>): this
@@ -101,7 +101,7 @@ States will not be auto-validated until it becomes **activated**. And they will
 
 ### Raw Error
 
-The state's validation result, is the same as the return value of the `validator`, regardless of child states. The difference compared to `ownError` is that it contains the type of `ValidationErrorObject`. You can check details about them in issue [#82](https://github.com/qiniu/formstate-x/issues/82).
+The state's validation result, regardless of child states. The difference compared to `ownError` is that it contains the type of `ValidationErrorObject`. You can check details about them in issue [#82](https://github.com/qiniu/formstate-x/issues/82).
 
 ### Disable State
 

src/adapter/v2.spec.ts

@@ -703,7 +703,6 @@ describe('toV2', () => {
       }
       value: V
       touched = false
-      ownError = undefined
       error = undefined
       rawError = undefined
       activated = false

src/adapter/v2.ts

@@ -25,10 +25,9 @@ class Upgrader<T extends v2.ComposibleValidatable<unknown, V>, V> extends BaseSt
 
   @computed get value() { return this.stateV2.value }
   @computed get touched() { return this.stateV2.dirty }
-  @computed get ownError() {
+  @computed get rawError() { 
     return getV3OwnError(this.stateV2)
-  }
-  @computed get rawError() { return this.ownError }
+   }
   @computed get error() { return this.stateV2.error }
   @computed get activated() { return this.stateV2._activated }
   @computed get validateStatus() {

src/debouncedState.ts

@@ -2,12 +2,12 @@ import { action, computed, makeObservable, observable, override, reaction } from
 import { FieldState } from './fieldState'
 import { ValidatableState } from './state'
 import { IState, ValidateStatus, ValueOf } from './types'
-import { debounce, isPassed, normalizeError } from './utils'
+import { debounce } from './utils'
 
 const defaultDelay = 200 // ms
 
-/** Infomation synced from original state */
-type OriginalInfo<V> = Pick<IState<V>, 'activated' | 'touched' | 'error' | 'ownError' | 'hasError'>
+/** Information synced from original state */
+type OriginalInfo<V> = Pick<IState<V>, 'activated' | 'touched' | 'error' | 'ownError' | 'hasError' | 'rawError'>
 
 /**
  * The state for debounce purpose.
@@ -24,7 +24,7 @@ export class DebouncedState<S extends IState<V>, V = ValueOf<S>> extends Validat
   /** Debounced version of original value */
   @observable.ref value!: V
 
-  /** Orignal information, same version with current `value` */
+  /** Original information, same version with current `value` */
   @observable.ref private synced!: OriginalInfo<V>
 
   /** Original information for current `value` */
@@ -43,18 +43,19 @@ export class DebouncedState<S extends IState<V>, V = ValueOf<S>> extends Validat
       touched: this.$.touched,
       error: this.$.error,
       ownError: this.$.ownError,
-      hasError: this.$.hasError
+      hasError: this.$.hasError,
+      rawError: this.$.rawError
     }
   }
 
   @computed get touched() {
     return this.original.touched
   }
 
-  @override override get ownError() {
+  @override override get rawError() {
     if (this.disabled) return undefined
-    if (this.rawError) return normalizeError(this.rawError)
-    return this.original.ownError
+    if (this.validationResult) return this.validationResult
+    return this.original.rawError
   }
 
   @override override get error() {
@@ -63,11 +64,6 @@ export class DebouncedState<S extends IState<V>, V = ValueOf<S>> extends Validat
     return this.original.error
   }
 
-  @override override get hasError() {
-    if (this.disabled) return false
-    return !isPassed(this.rawError) || this.original.hasError
-  }
-
   @override override get validateStatus() {
     if (this.disabled) return ValidateStatus.WontValidate
     if (

src/formState.ts

@@ -1,7 +1,6 @@
 import { observable, computed, isObservable, action, reaction, makeObservable, override } from 'mobx'
 import { IState, ValidateStatus, ValidateResult, ValueOfStatesObject } from './types'
 import { ValidatableState } from './state'
-import { isPassed } from './utils'
 
 abstract class AbstractFormState<T, V> extends ValidatableState<V> implements IState<V> {
 
@@ -48,21 +47,6 @@ abstract class AbstractFormState<T, V> extends ValidatableState<V> implements IS
     }
   }
 
-  @override override get hasError() {
-    if (this.disabled) {
-      return false
-    }
-    if (!isPassed(this.rawError)) {
-      return true
-    }
-    for (const state of this.childStates) {
-      if (state.hasError) {
-        return true
-      }
-    }
-    return false
-  }
-
   /** If reference of child states has been touched. */
   @observable protected ownTouched = false
 

src/state.ts

@@ -1,20 +1,24 @@
 import { action, autorun, computed, makeObservable, observable, when } from 'mobx'
-import { ValidationResult, ValidationError, IState, Validation, ValidateResult, ValidateStatus, Validator } from './types'
+import { ValidationResult, IState, Validation, ValidateResult, ValidationError, ValidateStatus, Validator } from './types'
 import Disposable from './disposable'
-import { applyValidators, isPromiseLike, isPassed, normalizeError } from './utils'
+import { applyValidators, isPromiseLike, normalizeError } from './utils'
 
 /** Extraction for some basic features of State */
 export abstract class BaseState extends Disposable implements Pick<
   IState, 'rawError' | 'ownError' | 'hasOwnError' | 'hasError' | 'validateStatus' | 'validating' | 'validated'
-  > {
+> {
 
   abstract rawError: ValidationResult
 
+  abstract error: ValidationError
+
   @computed get hasError() {
-    return !isPassed(this.rawError)
+    return !!this.error
   }
 
-  abstract ownError: ValidationError
+  @computed get ownError() {
+    return normalizeError(this.rawError)
+  }
 
   @computed get hasOwnError() {
     return !!this.ownError
@@ -54,16 +58,12 @@ export abstract class ValidatableState<V> extends BaseState implements IState<V>
   @observable activated = false
 
   /**
-   * The original return value of validation.
+   * The original validation result.
    */
-  @observable private _error: ValidationResult
+  @observable protected validationResult: ValidationResult
 
   @computed get rawError() {
-    return this.disabled ? undefined : this._error
-  }
-
-  @computed get ownError() {
-    return normalizeError(this.rawError)
+    return this.disabled ? undefined : this.validationResult
   }
 
   @computed get error() {
@@ -74,7 +74,7 @@ export abstract class ValidatableState<V> extends BaseState implements IState<V>
    * Set validation result.
    */
   @action setError(error: ValidationResult) {
-    this._error = error
+    this.validationResult = error
   }
 
   /** List of validator functions. */
@@ -167,7 +167,7 @@ export abstract class ValidatableState<V> extends BaseState implements IState<V>
   @action reset() {
     this.activated = false
     this._validateStatus = ValidateStatus.NotValidated
-    this._error = undefined
+    this.validationResult = undefined
     this.validation = undefined
   }
 

src/transformedState.ts

@@ -1,4 +1,4 @@
-import { computed, override } from 'mobx'
+import { computed } from 'mobx'
 import { BaseState } from './state'
 import { IState, Validator, ValueOf } from './types'
 
@@ -23,18 +23,10 @@ export class TransformedState<S extends IState<$V>, V, $V = ValueOf<S>> extends
     return this.parseOriginalValue(this.$.value)
   }
 
-  @computed get ownError() {
-    return this.$.ownError
-  }
-
   @computed get rawError() {
     return this.$.rawError
   }
 
-  @override override get hasError() {
-    return this.$.hasError
-  }
-
   @computed get error() {
     return this.$.error
   }

src/types.ts

@@ -40,7 +40,7 @@ export interface IState<V = unknown> {
   hasError: boolean
   /** The state's own error info, regardless of child states. */
   ownError: ValidationError
-  /** The state's validation result, is the same as the return value of the validator, regardless of child states. */
+  /** The state's validation result, regardless of child states. */
   rawError: ValidationResult
   /** If the state contains its own error info. */
   hasOwnError: boolean

src/utils.spec.ts

@@ -97,6 +97,7 @@ describe('isErrorObject', () => {
     expect(isErrorObject('foo')).toBe(false)
     expect(isErrorObject({})).toBe(false)
     expect(isErrorObject({ foo: 'foo' })).toBe(false)
+    expect(isErrorObject({ message: '' })).toBe(true)
     expect(isErrorObject({ message: 'msg' })).toBe(true)
     expect(isErrorObject({ message: 'msg', extra: 'ext' })).toBe(true)
     expect(isErrorObject(new Error('error msg'))).toBe(true)
@@ -106,7 +107,6 @@ describe('isErrorObject', () => {
 
     class Bar extends Foo {}
     expect(isErrorObject(new Bar())).toBe(true)
-    expect(() => isErrorObject({ message: '' })).toThrow(inValidErrorObjectMsg)
   })
 })
 
@@ -115,6 +115,7 @@ describe('normalizeValidationResult', () => {
     expect(normalizeError(undefined)).toBe(undefined)
     expect(normalizeError('')).toBe(undefined)
     expect(normalizeError('foo')).toBe('foo')
+    expect(() => normalizeError({ message: '' })).toThrow(inValidErrorObjectMsg)
     expect(normalizeError({ message: 'mewo' })).toBe('mewo')
     expect(normalizeError(Error('mewo2'))).toBe('mewo2')
 

src/utils.ts

@@ -1,9 +1,14 @@
 import { isObservableArray, IObservableArray } from 'mobx'
 import { Validator, ValidatorReturned, ValidationError, ValidationErrorObject, ValidationResult } from './types'
 
+export const inValidErrorObjectMsg = 'ValidationErrorObject message property cannot be empty'
+
 // ValidationResult -> ValidationError
 export function normalizeError(result: ValidationResult): ValidationError {
   if (isErrorObject(result)) {
+    if (!result.message) {
+      throw new Error(inValidErrorObjectMsg)
+    }
     return result.message
   }
 
@@ -14,13 +19,8 @@ export function normalizeError(result: ValidationResult): ValidationError {
   return result
 }
 
-export const inValidErrorObjectMsg = 'ValidationErrorObject message property cannot be empty'
-
 export function isErrorObject(err: any): err is ValidationErrorObject {
-  if (err != null && typeof err === 'object' && 'message' in err) {
-    if (!err.message) {
-      throw new Error('ValidationErrorObject message property cannot be empty')
-    }
+  if (err != null && typeof err === 'object' && typeof err.message === 'string') {
     return true
   }
   return false