-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(abstract-control): add pristine/dirty flags
- Loading branch information
1 parent
f1850bf
commit 4fdd504
Showing
6 changed files
with
1,338 additions
and
541 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| # Mobx Reactive Forms | ||
|
|
||
| _Implementation of Angular Reactive forms for mobx applications_ | ||
|
|
||
| # Installation | ||
| `npm i mobx-reactive-forms` | ||
| # Usage | ||
|
|
||
| ## IControlValueAccessor | ||
| Everything you need to do - 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<IControlValueAccessor> { | ||
| public onChange = (event: SyntheticEvent<HTMLInputElement>) => { | ||
| this.props.propagateChange(event.currentTarget.value) | ||
| } | ||
|
|
||
| public render() { | ||
| const control: FormControl = this.props.formControl; | ||
| return <input | ||
| onChange={this.onChange} | ||
| onBlur={this.props.propagateTouch} | ||
| disabled={control.disabled} | ||
| value={control.value} | ||
| /> | ||
| } | ||
| } | ||
|
|
||
| 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('email')} /> | ||
| <ReactiveInput formControl={this.loginForm.get('password')} /> | ||
| </form> | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Not Implemented yet | ||
| 1) AsyncValidators | ||
| 2) FormArray | ||
|
|
||
| ## Won't implement | ||
| 1) FormBuilder |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,8 @@ | ||
| import DummyClass from '../src/mobx-reactive-forms' | ||
|
|
||
| /** | ||
| * Dummy test | ||
| */ | ||
| describe('Dummy test', () => { | ||
| it('works if true is truthy', () => { | ||
| expect(true).toBeTruthy() | ||
| }) | ||
|
|
||
| it('DummyClass is instantiable', () => { | ||
| expect(new DummyClass()).toBeInstanceOf(DummyClass) | ||
| }) | ||
| }) |
Oops, something went wrong.