Проверка формы пользовательского интерфейса материала ReactJS с помощью formik - PullRequest
Новая
       36

Проверка формы пользовательского интерфейса материала ReactJS с помощью formik

0 голосов
/ 26 октября 2019

Я пытаюсь реализовать проверку поля номера телефона с reactjs material ui и formik

Я прочитал огромную статью об этом, но я не смог реализовать это по-своему.

Я отправляю воспроизводимый код моего компонента здесь: 

import React from 'react';
import TextField from '@material-ui/core/TextField';

import { connect } from "react-redux";
import { FormGroup } from '@material-ui/core';

import {
  Formik, Form, Field, ErrorMessage,
} from 'formik';
import * as Yup from 'yup';


function App(props) {

  const [values, setValues] = React.useState({
    phone: '',
  });


  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };


  const validationSchema = Yup.object({
    phone: Yup.string("")
      .min(11, "phone must contain atleast 11 characters")
      .required("Enter your phone"),
  });



  return (

    <React.Fragment>

      <FormGroup autoComplete="on">
        <TextField
          id=""
          label="Phone"
          value={values.phone}
          onChange={handleChange('phone')}
          type="number"
          name='phone'
        />
      </FormGroup>

    </React.Fragment>

  );
}


export default connect(null)(App);

Может ли кто-нибудь помочь мне добиться проверки? Я пытаюсь в течение последних 6 дней и читаю полную документацию, но я пока не смог этого сделать.

Было бы очень признательно, если кто-нибудь может мне помочь в этом случае?

1 Ответ

0 голосов
/ 12 ноября 2019

Пожалуйста, используйте `'material-ui-phone-number'. Он подтвердит ввод с помощью маски. Вам не нужно пачкать руку. Но вам может потребоваться очистить возвращаемое значение номера телефона от Formik. 

import MuiPhoneNumber from 'material-ui-phone-number'

<Field
  name="phoneNumber"
  label={t('Phone Number')}
  component={MuiPhoneNumber}
  variant="outlined"
  defaultCountry="mm"
  fullWidth
  onChange={v => setFieldValue('phoneNumber', v)}
  helperText={touched.phoneNumber ? t(errors.phoneNumber) : ''}
  error={touched.phoneNumber && Boolean(errors.phoneNumber)} />
...