Formularz z numerem telefonu i adresem e-mail

tworzę apkę react + typescript, mam problem z formularzem, po kliknięciu przycisku w konsoli wyśwetlają mi się błędy jednak nie widać ich na stronie, po tym jak zaczynam pisać to wtedy pod tym inputem pojawia się błąd, trochę jakby onChange był zamieniony z submitem, oto kod link i strona link

Żeby React prawidłowo wykrył, że zmienia się stan komponentu to metoda validate powinna zwracać za każdym razem nowy obiekt, bez niepotrzebnej mutacji

https://github.com/krystianwojtowicz/ts-form/blob/main/src/components/Form.tsx#L76

const initialErrors = {
  email: "",
  phone: "",
};

// ...

const validate = (values: RegisterFormData) => {
  const errors: Record<keyof RegisterFormData, string> = { ...initialErrors }; // <-- zmieniamy tą linijkę

  // ...
  
  return errors;
};

https://github.com/krystianwojtowicz/ts-form/blob/main/src/components/Form.tsx#L67

Masz błędny warunek przy walidacji, bo taki zapis

if (!values.email.match(/.+@.+/)) {
  // 
}

zawsze zwróci true

Xarviel napisał(a):

Żeby React prawidłowo wykrył, że zmienia się stan komponentu to metoda validate powinna zwracać za każdym razem nowy obiekt, bez niepotrzebnej mutacji

https://github.com/krystianwojtowicz/ts-form/blob/main/src/components/Form.tsx#L76

const initialErrors = {
  email: "",
  phone: "",
};

// ...

const validate = (values: RegisterFormData) => {
  const errors: Record<keyof RegisterFormData, string> = { ...initialErrors }; // <-- zmieniamy tą linijkę

  // ...
  
  return errors;
};

---

https://github.com/krystianwojtowicz/ts-form/blob/main/src/components/Form.tsx#L67

Masz błędny warunek przy walidacji, bo taki zapis

if (!values.email.match(/.+@.+/)) {
  // 
}

zawsze zwróci true

więc na co powinna być zmieniona ta linijka? Na errors jeśli istnieją lub initial jeśli nie istnieją? Mam sprawdzić czy jest znak @, to może być np. metoda includes jak tam jest w tym warunku?

mistrzkrisu6 napisał(a):

Xarviel napisał(a):

Masz błędny warunek przy walidacji, bo taki zapis

if (!values.email.match(/.+@.+/)) {
  // 
}

zawsze zwróci true

więc na co powinna być zmieniona ta linijka? Na errors jeśli istnieją lub initial jeśli nie istnieją? Mam sprawdzić czy jest znak @, to może być np. metoda includes jak tam jest w tym warunku?

Ten zapis z match jest jednak prawidłowy

"test".match(/.+@.+/);          // null
"[email protected]"match(/.+@.+/); // tablica ['[email protected]', index: 0, input: '[email protected]', groups: undefined]

ale możesz go zamienić jeśli chcesz przykładowo na includes żeby pozbyć się wyrażenia regularnego

"test".includes('@');           // false
"[email protected]".includes('@'); // true 

Główny problem powinien być z tą linijką

const validate = (values: RegisterFormData) => {
  const errors: Record<keyof RegisterFormData, string> = initialErrors;

  // ...
}

metoda validate musi za każdym razem tworzyć nowy obiekt, a nie modyfikować istniejący

const validate = (values: RegisterFormData) => {
  const errors: Record<keyof RegisterFormData, string> = { ...initialErrors };

  // ...
}