Skip to content

Commit bf50330

Browse files
author
Kuldeep Saxena
authored
Update README.md
1 parent 788bb05 commit bf50330

File tree

1 file changed

+1
-62
lines changed

1 file changed

+1
-62
lines changed

README.md

Lines changed: 1 addition & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -16,68 +16,6 @@ It's a library inspired by the [Angular's Reactive Forms](https://angular.io/gui
1616
npm install react-reactive-form --save
1717
```
1818
# Basic Example
19-
```js
20-
import React, { Component } from 'react';
21-
import { FormBuilder, Validators, reactiveForm } from "react-reactive-form";
22-
23-
// Create the controls
24-
const loginForm = FormBuilder.group({
25-
username: ['', Validators.required],
26-
password: ['', Validators.required],
27-
rememberMe: false
28-
});
29-
30-
class Login extends Component {
31-
handleReset=(e) => {
32-
loginForm.reset();
33-
e.preventDefault();
34-
}
35-
handleSubmit=(e) => {
36-
console.log("Form values", loginForm.value);
37-
e.preventDefault();
38-
}
39-
render() {
40-
const {
41-
username,
42-
password,
43-
rememberMe
44-
} = this.props;
45-
return (
46-
<form onSubmit={this.handleSubmit}>
47-
<div>
48-
<input {...username.handler()}/>
49-
<span>
50-
{username.touched
51-
&& username.hasError('required')
52-
&& "Username is required"}
53-
</span>
54-
</div>
55-
<div>
56-
<input {...password.handler()}/>
57-
<span>
58-
{password.touched
59-
&& password.hasError('required')
60-
&& "Password is required"}
61-
</span>
62-
</div>
63-
<div>
64-
<input {...rememberMe.handler('checkbox')}/>
65-
</div>
66-
<button onClick={this.handleReset}>Reset</button>
67-
<button disabled={loginForm.invalid} type="submit">Submit</button>
68-
</form>
69-
);
70-
}
71-
}
72-
// React HOC to connect form with component.
73-
export default reactiveForm(Login, loginForm);
74-
```
75-
76-
### Note:
77-
While working with larger forms, deep nested forms & [Form Array’s](docs/api/FormArray.md) it’s highly recommended to use the [Field](docs/api/Field.md) component instead of `reactiveForm` method.
78-
79-
`Field` component subscribes a particular control & only update it when it’s or it’s parent’s state changes, which of course reduces the re-rendering and boost the performance significantly.
80-
8119

8220
```js
8321
import React, { Component } from 'react';
@@ -169,6 +107,7 @@ Try out `react-reactive-forms` in these sandbox versions of the Examples.
169107
* [Sync & Async Validation](https://codesandbox.io/s/qq8xq7j2w)
170108
* [User Registeration Form With Nested Forms](https://codesandbox.io/s/p2rqmr8qk7)
171109
* [Form Array With Dynamic Controls](https://codesandbox.io/s/nw9wxw2nvl)
110+
* [Update On Submit](https://codesandbox.io/s/3qk1ly16j1)
172111

173112
Let's make React Reactive Forms better! If you're interested in helping, all contributions are welcome and appreciated.
174113

0 commit comments

Comments
 (0)