Question

我是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')。

Answer 1

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

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

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

1 个答案: