Rendered readonly input field

[pyprism]

I am just following the quick start tutorial. After the rendering the form can't accept any value. Although, the submit button working, printing the default error message All form errors Object {username: "The Username field is required.", password: "The Password field is required."}

Here is my codes:

// models/forms/LoginForm.js

import validatorjs from 'validatorjs';
import MobxReactForm from 'mobx-react-form';

const plugins = { dvr: validatorjs };

const fields = {
  username: {
    label: 'Username',
    placeholder: 'Insert Username',
    rules: 'required|string|between:2,25'
  },
  password: {
    label: 'Password',
    placeholder: 'Insert Password',
    rules: 'required|string|between:2,25'
  }
};

class LoginForm extends MobxReactForm {

  onSuccess(form) {
    console.log('Form is valid! Send the request here.');
    // get field values
    console.log('Form Values!', form.values());
  }

  onError(form) {
    // get all form errors
    console.log('All form errors', form.errors());
    // invalidate the form with a custom error message
    form.invalidate('This is a generic error message!');
  }
}

export default new LoginForm({ fields }, { plugins });

// components/Login.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Helmet from "react-helmet";
import axios from 'axios';
import { browserHistory } from 'react-router';
import LoginForm from '../models/forms/LoginForm';

export default class Login extends React.Component {
render () {
        return <div className="wrapper">
            <Helmet
                title=": Login"
                link={[
                    {"rel": "stylesheet", "href": "/static/css/bootstrap.min.css"},
                    {"rel": "stylesheet", "href": "/static/css/login.css"},
                    {"rel": "icon", "href": "/static/favicon.ico"},
                    {"rel": "stylesheet", "type": "text/css", "href": "/static/css/sweetalert.css"}
                ]}
            />
 <form>
                <label htmlFor={LoginForm.$('username').id}>
                    {LoginForm.$('username').label}
                </label>
                <input {...LoginForm.$('username').bind()} />
                <p>{LoginForm.$('username').error}</p>

                <label htmlFor={LoginForm.$('password').id}>
                    {LoginForm.$('password').label}
                </label>
                <input {...LoginForm.$('password').bind({ type: 'password'})} />
                    <p>{LoginForm.$('password').error}</p>

                    <button type="submit" onClick={LoginForm.onSubmit}>Submit</button>
                    <button type="button" onClick={LoginForm.onReset}>Reset</button>
                    <button type="button" onClick={LoginForm.onClear}>Clear</button>

                    <p>{LoginForm.error}</p>
                    </form>

                    </div>

                    }

                }

[foxhound87]

No errors?

The issue could be on the components. Check if you are using the fileds 'onChange()' handler on the inputs

[pyprism]

updated my issue , please check again.

[foxhound87]

which version are you using?

[foxhound87]

I think you are missing the mobx observer on you component

[pyprism]

Thanks. Silly mistake