Redux 양식 - 만진으로 필드를 설정하는 방법

Question

여러 페이지로 구성된 양식으로 작업하고 있는데 유효성 검사를 해결하고 싶습니다.

제출 버튼을 누르면 현재 페이지의 모든 필드 아래에 오류 메시지가 표시되지만 페이지를 변경하면이 필드가 터치 된 것으로 설정되지 않았기 때문에 다시 제출해야합니다.

예를 들어 양식에 플래그 anyTouched: true이 있으면 예를 들어 페이지의 모든 필드를 손댈 수 있도록 설정하면 문제가 해결됩니다.

저는 redux-form: '^6.0.0-rc.4'을 사용하고 있는데 여기에는 redux-form과 필드로 구성된 여러 구성 요소가 포함되어 있습니다.

Answer 1

더보기 좋았어 야합니다.

Redux 양식은 구성 요소의 지주로서 touch를 반환합니다. 이 함수는 필드의 이름을 매개 변수로 취하므로 submitFailed이 변경 될 때 componentWillUpdate을 체크인하면 유효하지 않은 모든 필드를 건드릴 것입니다.

componentWillUpdate(nextProps) { 
    const { 
     formName: { syncErrors }, 
     submitFailed, 
     touch 
    } = this.props 

    if (submitFailed !== nextProps.submitFailed) { 
     const toTouch = [] 

     for (const key in syncErrors) { 
     syncErrors.hasOwnProperty(key) && toTouch.push(key) 
     } 
     touch(...toTouch) 
    } 
    } 

Answer 2

나는 당신의 문제는 주위의 반대 방향이라고 생각,하지만 난 형태로 모든 필드 터치 한 후

에서 ... anyTouched 세트를 가질 수있는 방법을 찾고 않았다 같은 경우 사람이 여기에 토지 redux-form v6에서는 폼 수준 구성 touchOnChange 및 touchOnBlur-see the docs here과 같이 원하는 동작을 명시 적으로 선택해야합니다. 기본적으로 아무 것도 구성되어 있지 않으므로 아무 일도 발생하지 않습니다. 특정 필드가 표시되도록 해당 필드의 onChange 또는 onBlur 핸들러가 각각 호출 될 때 접촉 (따라서 anyTouched 양식에 true 표시되어 있습니다)로

const Form = reduxForm({ 
    form: 'my-form', 
    touchOnChange: true, 
    touchOnBlur: true 
})(...) 

이러한 플래그를 확인합니다.