DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Rafael de Bastiani
Rafael de Bastiani

Posted on

[types and tricks] Customizando um input label required do formik

Como inserir um asterisco no label de um custom input do formik

Opa, beleza? Bora ver como fazer um custom input massa com direito a um asterisco de required.

InputFormik
Label

Vamos ver alguns cΓ³digos:

const Label = ({ children, labelMsg, labelTop = true, name, formik }: IProps) =>
  labelTop ? (
    <ContentStyled isRequired={formik && isRequiredField(formik, name)}>
      <label htmlFor={name}>
        {labelMsg}
        {children}
      </label>
    </ContentStyled>
  ) : (
    <ContentStyled isRequired={formik && isRequiredField(formik, name)}>
      <LabelStyled label={labelMsg}>{children}</LabelStyled>
    </ContentStyled>
  );

labelTop define se o label vai ficar no topo ou do lado do input.
Agora vamos para a mΓ‘gica, o isRequired e o isRequiredField:

export const ContentStyled = styled.div`${(props: IProps) => props.isRequired &&`label::before {
display: inline-block;
margin-right: 4px;
color: #f5222d;
font-size: 14px;
font-family: SimSun, sans-serif;
line-height: 1;
content: '\*';
}`}`;

Como visto no cΓ³digo a cima, temos um styled-component com a props isRequired e ali temos entΓ£o o css que insere
o asterisco do lado do label.

const isRequiredField = ({ validationSchema }: any, name: string) => {
  try {
    const isRequired = validationSchema.fields[name]
      ? !!validationSchema.fields[name].tests.find(
          (test: any) => test.OPTIONS.name === 'required'
        ).OPTIONS.name
      : false;
    return isRequired;
  } catch (event) {
    return false;
  }
};

Então temos a função que identifica se o field é required ou não por meio do validationSchema do formik.

Nesse InputFormik ainda temos uma validação de senha conforme a imagem:

strongerlevel

Top comments (0)

Create an Account!

πŸ‘€ Just want to lurk?

That's fine, you can still create an account and turn on features like 🌚 dark mode.