Проверка Formik js - PullRequest
Новая
       11

Проверка Formik js

0 голосов
/ 16 июня 2020

Имею реализованный формик с react native. Я использую formik: 2.1.4, yup: 0.29.1 и реагирую на native: 0.62. Я использую валидацию с да, но валидация срабатывает только при размытии. Как запустить проверку при изменении текста? 

  <Formik
      enableReinitialize
      initialValues={{
        phoneNumber: props.phoneNumber,
      }}
      onSubmit={values => {
        console.log('Login Submit');
      }}
      validateOnMount={true}
      validationSchema={yup.object().shape({
        phoneNumber: yup
          .string()
          .required()
          .min(8)
          .matches(regexPhoneNumber, 'Phone number is not valid'),
      })}>
      {({
        // values,
        handleChange,
        errors,
        setFieldTouched,
        touched,
        isValid,
        handleSubmit,
      }) => (
          <View style={styles.form}>
            <View style={styles.subContainer}>
              <View style={styles.containerTitle}>
                <Text style={styles.textTitle}>+62</Text>
              </View>
              <View style={styles.containerPhoneNumber}>
                {renderFocus()}
                <TextInput
                  onFocus={() => props.setFocus(true)}
                  value={props.phoneNumber}
                  style={styles.subContainerPhoneNumber}
                  placeholderStyle={styles.placeholder}
                  placeholder={'Type your phone number'}
                  onChangeText={(value) => {
                    handleChange('phoneNumber');
                    props.changePhoneNumber(value);
                  }}
                  keyboardType={'numeric'}
                  onBlur={() => setFieldTouched('phoneNumber', true)}
                />
              </View>
            </View>
            {touched.phoneNumber && errors.phoneNumber && (
              <View style={styles.containerError}>
                <Text style={styles.textError}>Phone number is not valid</Text>
              </View>
            )}
            <View style={styles.containerButton}>
              <TouchableOpacity
                disabled={!isValid}
                id={'nextButton'}
                accessible={true}
                accessibilityLabel={'nextButton'}
                // eslint-disable-next-line react-native/no-inline-styles
                style={{
                  backgroundColor: isValid ? color.thema : color.grey,
                  paddingHorizontal: responsiveWidth(8.3),
                  paddingVertical: responsiveHeight(2.2),
                  justifyContent: 'center',
                  alignItems: 'center',
                  borderRadius: 5,
                }}
                onPress={() => handleSubmit}>
                <Text style={styles.textButton}>Next</Text>
              </TouchableOpacity>
            </View>
          </View>
        )}
    </Formik>

С этим кодом проверка при запуске при вводе размытого текста. Мне нужно активировать проверку текста изменения.

1 Ответ

0 голосов
/ 16 июня 2020

Поместите строку setFieldTouched('phoneNumber', true) также в onChangeText. 

...
...
<TextInput
  onFocus={() => props.setFocus(true)}
  value={props.phoneNumber}
  style={styles.subContainerPhoneNumber}
  placeholderStyle={styles.placeholder}
  placeholder={'Type your phone number'}
  onChangeText={(value) => {
    setFieldTouched('phoneNumber') // add here also
    handleChange('phoneNumber');
    props.changePhoneNumber(value);
  }}
  keyboardType={'numeric'}
  onBlur={() => setFieldTouched('phoneNumber')}
/>
...
...
...