@currency-one/form-utils
v1.0.14
Published
Form utils
Downloads
130
Readme
Form-utils
This is typescript package of form utilities
Installation
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.):
import {
changeFormValue,
createFormField,
createPasswordFormField,
FormField,
formHasError,
GenericTypeOfFormField,
PwdField,
validateForm,
FormFieldValidatorFn,
} from '@currency-one/form-utils'
export const notEmptyValidator: FormFieldValidatorFn<string> = (value) => {
return value === '' ? 'This field cant be empty' : ''
}
export interface LoginForm {
email: FormField<string>
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 (
<form id="login-form" name="login-form" method="POST" onSubmit={this.handleSubmit}>
<div className="login__fieldset">
<input
type={'username'}
name={'username'}
value={this.state.loginForm.email.val}
onChange={this.handleEmail}
/>
{this.state.loginForm.email.err && (
<div className={'error'}>{this.state.loginForm.email.err}</div>
)}
</div>
<div className="login__fieldset">
<input
type={'password'}
name={'password'}
value={this.state.loginForm.password.val}
onChange={this.handlePassword}
/>
{this.state.loginForm.password.err && (
<div className={'error'}>{this.state.loginForm.password.err}</div>
)}
</div>
<div className="login__submit">
<button type="submit">Login</button>
</div>
</form>
)
}
public changeFormValue<T extends keyof LoginForm, U extends LoginForm[T]>(
fieldName: T,
value: GenericTypeOfFormField<U>,
) {
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<void> => {
// Submit form
}
}
Documentation
See documentation for more details