Yeniden formdaki başka bir Alana dayalı bir alanı doğrulayın Form

Question

redux-form kullanıyorum ve Bileşenim'in birkaç FieldArray var. FieldArray bileşenlerinden biri, ekran görüntüsünde gösterilen tabloyu oluşturur. Burada her satır, onay kutusunu içeren Field bileşenidir. Benim elde etmek istediğim, bu satırdaki checkbox bileşeninin işaretliyse, yalnızca price alanı gerekir.

ben docs açıklandığı gibi validate.js ile çözmeye çalıştı, ama beri, bu bileşen olarak yapıya sahiptir:

benim SecondComponent ben fruitsList üzerinde yineleme ve am yılında

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

uzunluk sonra 1'den fazla, eğer ThirdComponent'u oluşturuyorum. Bu bileşen, meyve listelerinin ekran görüntüsünde gösterilmesinden sorumludur. Bir derece iç içe geçmiş olmanın, değerlerle doğruladığım zaman, çok fazla performans gecikmesi var, ekranım ThirdComponent'u ortaya çıkana kadar donuyor. Her bir bileşen Fields bitine sahiptir, bu nedenle bunları kolayca birleştiremezsiniz. Bunu zarif bir şekilde çözmenin daha kolay bir yolu yararlı olacaktır. doğrulanması için mantık aşağıdaki gibidir:

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

senkron doğrulama işlevi şeklinde içinde tüm değerleri verilmiştir. Bu nedenle, onay kutunuzun bir form değeri olduğunu varsayarak, ihtiyacınız olan tüm bilgilere sahip olursunuz.

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)