@@ -47,6 +47,16 @@ import {
4747 Validators ,
4848 } from " react-reactive-form" ;
4949
50+ const TextInput = ({ handler, touched, hasError, meta }) => (
51+ < div>
52+ < input placeholder= {meta .placeholder } {... handler ()}/ >
53+ < span>
54+ {touched
55+ && hasError (" required" )
56+ && ` ${ meta .label } is required` }
57+ < / span>
58+ < / div>
59+ )
5060export default class Login extends Component {
5161 loginForm = FormBuilder .group ({
5262 username: [" " , Validators .required ],
@@ -67,32 +77,19 @@ export default class Login extends Component {
6777 control= {this .loginForm }
6878 render= {({ get, invalid }) => (
6979 < form onSubmit= {this .handleSubmit }>
80+
7081 < FieldControl
7182 name= " username"
72- render= {({ handler, touched, hasError }) => (
73- < div>
74- < input {... handler ()}/ >
75- < span>
76- {touched
77- && hasError (" required" )
78- && " Username is required" }
79- < / span>
80- < / div>
81- )}
83+ render= {TextInput}
84+ meta= {{ label: " Username" , placeholder: " Enter username" }}
8285 / >
86+
8387 < FieldControl
8488 name= " password"
85- render= {({ handler, touched, hasError }) => (
86- < div>
87- < input {... handler ()}/ >
88- < span>
89- {touched
90- && hasError (" required" )
91- && " Password is required" }
92- < / span>
93- < / div>
94- )}
89+ render= {TextInput}
90+ meta= {{ label: " Password" , placeholder: " Enter password" }}
9591 / >
92+
9693 < FieldControl
9794 name= " rememberMe"
9895 render= {({handler}) => (
0 commit comments