Form utils
npm install @currency-one/form-utils
This is typescript package of form utilities
To install run:
``
npm i @currency-one/form-utils
or
`
yarn add @currency-one/form-utils
Basic usage with React and build systems (webpack, parcel etc.):
`js
import {
changeFormValue,
createFormField,
createPasswordFormField,
FormField,
formHasError,
GenericTypeOfFormField,
PwdField,
validateForm,
FormFieldValidatorFn,
} from '@currency-one/form-utils'
export const notEmptyValidator: FormFieldValidatorFn
return value === '' ? 'This field cant be empty' : ''
}
export interface LoginForm {
email: FormField
password: PwdField
}
export interface LoginViewState {
loginForm: LoginForm
}
export default class LoginFormView extends Component<{}, LoginViewState> {
public constructor(props) {
super(props)
this.state = {
loginForm: {
email: createFormField('', [notEmptyValidator]),
password: createPasswordFormField('', [notEmptyValidator]),
},
}
}
public render() {
return (
public changeFormValue
fieldName: T,
value: GenericTypeOfFormField,
) {
this.setState({ loginForm: changeFormValue(this.state.loginForm, fieldName, value) })
}
public handleEmail = (event): void => {
this.changeFormValue('email', event.target.value.trim())
}
public handlePassword = (event): void => {
this.changeFormValue('password', event.target.value)
}
public formHasErrors = (): boolean => formHasError(this.state.loginForm)
public validateForm = (): LoginForm => validateForm(this.state.loginForm)
public handleSubmit = (event): void => {
event.preventDefault()
const loginFormValidated = this.validateForm()
this.setState(
{
loginForm: loginFormValidated,
},
() => !this.formHasErrors() && this.submitLogin(),
)
}
public submitLogin = async (): Promise
// Submit form
}
}
``
See documentation for more details