Try using Autoform with React

announce
1

Autoform is awsome, as well as React.

These days I have done some work in my current project, trying to find a way to build form with clear concerns using react and autoform. I am satisfied with the result, although, there are still many problems.

The code is not well organized into packages as it’s initially used as something in a whole project. I’ve moved them out into a demo project, and deployed it on meteor.com. I want to know if people are interesting in such things, and hope to get some ideas and suggestions from the community, thanks.

Demo
Github

Here is another example code snippet:

let schema = new SimpleSchema({
    email: {
        label: 'Email',
        type: String,
        regEx: SimpleSchema.RegEx.Email
    },
    password: {
        label: '密码',
        type: String,
        min: Models.Users.const.passwordMinLength
    }
});

schema.messages({
    regEx: [
        {exp: SimpleSchema.RegEx.Email, msg: "[value]不是一个有效的Email地址"}
    ],

    passwordMismatch: '两次输入的密码不一致'
});

Parts.LoginForm = buildSimpleAlertForm({
    form: 'Parts.LoginForm',
    schema,
    onSubmit(insertDoc) {
        Meteor.loginWithPassword(insertDoc.email, insertDoc.password, (err)=> {
            if (err) this.done(err);
            else this.done();
        });
        return false;
    },
    messages: {
        processing: '登录中，请稍候……',
        success(result, type, form) {
            return '登录成功！'
        },
        error(err, type, form) {
            switch (err.reason) {
                case 'Incorrect password':
                    return '密码错误！';
                case 'User not found':
                    return 'Email尚未注册！';
                case 'some email is not verified':
                    return 'Email尚未认证！';
                default:
                    console.error(err); // todo 未知错误
                    return '登录失败！'
            }
        }
    }
});

All the code in the demo may be used in different levels of a project. Sorry for Chinese comments.

4 Likes