以redux形式,在“字段级验证”中显示所有验证错误

问题描述

我是React的新手,正在尝试创建一个在每个字段中显示多个验证错误的表单。

这是字段

fun add(value: T) { list.add(T) }  // MyList has this function

fun main() {
    val numbers = getMyList()   // numbers can be MyList<Int>,MyList<Double> or something else
    numbers.add(someInt)        // cant store Int,what if its MyList<Double> ( Int != Double) 
    numbers.add(someDouble)     // cant do this,what if its MyList<Int>
}

// We dont kNow what type of MyList we going to get
fun getMyList(): MyList<Number>(){
  return if(feelingGood) { MyList<Int> () }
         else if(feelingOk> { MyList<Double> () }
         else { MyList<SomeOtherSubType>() }
}

这是我的abstract class E<out T> (t:T) { val x = t }

    <Field
        name="field_name"
        type="text"
        component={renderField}
        customClass="long-input"
        normalize={normAll([...])}
        validate={[rules.required,rules.another_rule,rules.this_rule]}
    />

这是字段级验证规则

renderField

问题在于,如果列表中的第一个规则未通过验证,则不会显示其他规则的验证错误

有没有办法显示所有这些?如您所见,我检查了const renderField = ({ input,label,customClass,disabled,type,Meta: { touched,error } }) => ( <div class={customClass}> <label>{label}</label> <div> <input {...input} type={type} disabled={disabled} /> {console.log(error)} <div class="error-message">{touched && error && <span>{error}</span>}</div> </div> </div> ) ,只有第一个通过了rules.required = value => (value || typeof value === 'number' ? undefined : 'required') rules.another_rule = value => (value && value === '3' ? undefined : 'This is not 3') rules.this_rule = value => (value && value === '5' ? undefined : 'This is not 5')

解决方法

我不确定字段级验证,但是我相信通过Sumbit验证,您可以将每个错误推送到数组中,然后将该数组映射到自定义输入组件中。

我还没有测试过,我只是提出一个解决方案。