да обновить схему с новыми полями проверки - PullRequest
Новая
       19

да обновить схему с новыми полями проверки

0 голосов
/ 03 августа 2020

В настоящее время я создаю несколько полей ввода на основе числа, которое передал пользователь. Итак, если пользователь ввел 2, это сгенерирует 2 набора пользовательских полей ввода. 

const addRowsToSvlanConfg = () => {
    const isErrors = Object.keys(errors).length !== 0;
    const svlanConfigdynamicArray = [];

    if (!isErrors && noOfGPONCardsState > 0 && noOfGPONCardsState <= 15) {
      for (let index = 0; index < noOfGPONCardsState; index++) {
        const svlanConfigNewdynamicArray = {
          oltSvlan: `oLTSVLAN${index}`,
          bngContainerName: `bNGContainer${index}`,
          bngSvlan: `bNGSVLANs${index}`,
          eviNumber: `eVInumber${index}`,
          oltSlot: `oLTSlot${index}`,
          cardModel: `cardModel${index}`,
        };
        svlanConfigdynamicArray.push(svlanConfigNewdynamicArray);
      }

      setSvlanConfigFields(svlanConfigdynamicArray);
    }
  };

В настоящее время я использую форму response-hook вместе с Yup для проверки. Мои проблемы Я хочу добавить проверку тех полей, которые были сгенерированы выше. 

const createOrderSchema = yup.object().shape({
    inpTicketID: yup
      .string()
      .trim()
      .min(4, '* Please enter minimum of 4 characters')
      .max(7, '* Please enter maximum of 7 characters')
      .matches('^([Tt][Gg])[A-Za-z0-9]*', '* Ticket ID must start with TG and it should be Alphanumeric')
      .required('* Please enter Ticket ID'),
  });

Это моя текущая схема Yup, но я не уверен, как дополнительно добавить проверку к полям, которые были созданы на основе пользователя input.

Вот как я отображаю ввод 

{svlanConfFields
    ? svlanConfFields.map((value, idx) => (
        <TableBody key={idx}>
          <TableRow>
            <TableCell>
              <TextField
                inputRef={register}
                name={`oLTSVLAN${idx}`}
                className={classes.textField}
                InputProps={{ disableUnderline: true }}
                onKeyUp={() => onOLTSVLANConfigKeyup(idx)}
                fullWidth
              />
            </TableCell>
          </TableRow>
        </TableBody>
      ))
    : null}

 const { register, trigger, handleSubmit, reset, errors, getValues, control } = useForm({
    resolver: yupResolver(createOrderSchema),
    mode: 'onChange',
    reValidateMode: 'onChange',
  });

Вот как я добавляю свою схему в форму response-hook. Любая помощь будет принята с благодарностью.

...