Xác thực một trường dựa trên một Trường khác trong redux Form

Question

Tôi đang sử dụng redux-form và Thành phần của tôi có một số FieldArray. Một trong những thành phần FieldArray tạo ra bảng như được hiển thị trong ảnh chụp màn hình. Ở đây mỗi hàng là một thành phần Field bao gồm cả hộp kiểm. Điều tôi muốn đạt được là nếu thành phần checkbox trên hàng đó được chọn, thì chỉ cần có trường price.

tôi đã cố gắng để giải quyết điều này bằng cách sử dụng validate.js như mô tả trong docs, nhưng từ đó, thành phần này có cấu trúc như sau:

<FirstComponent> 
<FieldArray 
    component={SecondComponent} 
    name="options" 
    fruits={fruitsList} 
/> 
</FirstComponent> 

Trong SecondComponent tôi đang iterating trên fruitsList và nếu chiều dài lớn hơn 1, sau đó Tôi làm cho ThirdComponent. Thành phần này chịu trách nhiệm tạo ra các danh sách trái cây như hiển thị trong ảnh chụp màn hình. Có một số mức độ làm tổ, khi tôi xác nhận với các giá trị, nó có rất nhiều hiệu suất tụt hậu, màn hình của tôi bị đóng băng cho đến khi nó hiển thị ThirdComponent. Mỗi thành phần có một bit là Fields nên không thể hợp nhất chúng dễ dàng. Bất kỳ cách nào dễ dàng hơn để giải quyết điều này theo cách thanh lịch sẽ hữu ích. Logic để phê chuẩn là như sau:

props.fruitsList.map((fruit, index) => { 
     const isChecked = values.getIn(['fruit', index, 'checked']) 
     if (isChecked) { 
     const price = values.getIn(['fruit', index, 'price']) 
     if (price === undefined || price.length === 0) { 
      errors.fruits[index] = { price: l('FORM->REQUIRED_FIELD') } 
     } 

     } 
     return errors 
    }) 

Answer 1

Chức năng xác nhận đồng bộ được đưa ra tất cả các giá trị trong các hình thức. Do đó, giả sử hộp kiểm của bạn là một giá trị biểu mẫu, bạn có tất cả thông tin bạn cần.

function validate(values) { 
    const errors = {} 
    errors.fruits = values.fruits.map(fruit => { 
    const fruitErrors = {} 
    if (fruit.checked) { // only do fruit validation if it's checked 
     if (!fruit.price) { 
     fruitErrors.price = 'Required' // Bad user!! 
     } 
    } 
    return fruitErrors 
    }) 
    return errors 
} 

... 

MyGroceryForm = reduxForm({ 
    form: 'groceries', 
    validate 
})(MyGroceryForm)