Implementation of Angular Reactive forms for mobx applications
API Reference
Installation
npm i mobx-reactive-forms
Usage
IControlValueAccessor
Everything you need to start - is to wrap your input component with connectForm HOC and pass propagateChange and propagateTouch methods
`
typescript jsx
import * as React from 'react'
import {observer} from 'mobx-react'
import {IControlValueAccessor, connectForm} from 'mobx-reactive-form'
@observer
class ReactiveInputComponent extends React.Component {
public onChange = (event: SyntheticEvent) => {
this.props.propagateChange(event.currentTarget.value)
}
public render() {
const control: FormControl = this.props.formControl;
return
}
}
export const ReactiveInput = connectForm(ReactiveInputComponent)
## Form
```typescript jsx
@observer
class ExampleForm extends React .Component {
loginForm = new FormGroup ({
email: new FormControl ('', [isValidEmail]),
password: new FormControl ('', [notEmpty])
})
render() {
return <form>
<ReactiveInput formControl={this .loginForm.get('emai l')} />
<ReactiveInput formControl={this .loginForm.get('passwor d')} />
</form>
}
}
Not Implemented yet
1) AsyncValidators
2) FormArray
Won't implement
1) FormBuilder
Variables
Const ALL_CHILDREN_SAME_VALUE_ERROR
ALL_CHILDREN_SAME_VALUE_ERROR: "All child values must be same" = "All child values must be same"
Const EMAIL_REGEXP
EMAIL_REGEXP: RegExp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
Const EXPECTED_DIFFERENT_VALUE_ERROR
EXPECTED_DIFFERENT_VALUE_ERROR: "Different value was expected" = "Different value was expected"
Const INVALIDATE_PLACEHOLDER_ERROR
INVALIDATE_PLACEHOLDER_ERROR: "Placeholder is invalid value" = "Placeholder is invalid value"
Const INVALID_EMAIL_ERROR
INVALID_EMAIL_ERROR: "Invalid email" = "Invalid email"
Const INVALID_PHONE_ERROR
INVALID_PHONE_ERROR: "Invalid Phone" = "Invalid Phone"
Const INVALID_POSITIVE_INTEGERS_ERROR
INVALID_POSITIVE_INTEGERS_ERROR: "Invalid Value" = "Invalid Value"
Const INVALID_POSITIVE_NUMBERS_ERROR
INVALID_POSITIVE_NUMBERS_ERROR: "Invalid Value" = "Invalid Value"
Const INVALID_TANGEM_CODE_ERROR
INVALID_TANGEM_CODE_ERROR: "Invalid Tangem Code" = "Invalid Tangem Code"
Const NOT_EMPTY_ERROR
NOT_EMPTY_ERROR: "EmptyError" = "EmptyError"
Const PHONE_REGEXP
PHONE_REGEXP: RegExp = /^\+[1-9]\d{9,15}$/
Const POSITIVE_INTEGERS_REGEXP
POSITIVE_INTEGERS_REGEXP: RegExp = /^[1-9][0-9]*$/
Const POSITIVE_NUMBERS_REGEXP
POSITIVE_NUMBERS_REGEXP: RegExp = /^(0*[1-9][0-9]*(\.[0-9]+)?|0+\.[0-9]*[1-9][0-9]*)$/
Const REGEXP_MATCH_ERROR
REGEXP_MATCH_ERROR: "RegExp failed" = "RegExp failed"
Const TANGEM_CODE_REGEXP
TANGEM_CODE_REGEXP: RegExp = /^[a-zA-Z0-9_-]{16}$/