Quiero actualizar el estado "errorFlag" cuando el usuario ingresó valores que no coinciden con el patrón, ¿cómo se puede hacer esto para validar el valor de entrada?
const [errorFlag, setErrorFlag] = useState(false); <Input name='E-Mail-Address' type='email' pattern="^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$" errorMessage="* Invalid E-Mail-Address" onChange={setEmail1} error={email1 === ''} required={true} />
Entrada de formulario
import React from "react"; export interface InputProps { .... onChange?: (value: string) => void; } export class Input extends React.Component<InputProps, { value: string; }> { constructor(props: InputProps) { super(props); this.state = { value: '' }; } private onChange = (event: React.ChangeEvent<HTMLInputElement>) => { this.setState({ value: event.target.value }); this.props.onChange?.(event.target.value); } render() { return ( <div key="form-name" className="formrow" style={{...this.props.style}}> <input type={this.props.type??"text"} placeholder={' '} id={id} className="forminput" pattern={this.props.pattern} onChange={this.onChange} required={this.props.required} /> <span id="formInput-errorspan" className="errorSpan">{this.props.errorMessage}</span> </div> ); } }
Puede usar el método checkValidity simplemente devolviendo verdadero o falso.
export default function App() { const [errorFlag, setErrorFlag] = useState(false); const [email, setEmail] = useState(""); const onChange = (e) => { setErrorFlag(e.target.checkValidity()); setEmail(e.target.value); }; return ( <div className="App"> {errorFlag ? "Valid" : "Invalid"} <br /> <Input name="E-Mail-Address" type="email" pattern="^[a-zA-Z0-9._:$!%-]+@[a-zA-Z0-9.-]+.[a-zA-Z]$" errorMessage="* Invalid E-Mail-Address" onChange={onChange} required={true} /> {email} </div> ); }
Aporte
... private onChange = (event: React.ChangeEvent<HTMLInputElement>) => { this.setState({ value: event.target.value }); this.props.onChange(event); } ...