complex form

[mvlach]

Hi,

I would like to study this library but I have no idea where to start. I can make simple form and simple validation. But I can't create complex form with complex validation rules. You mentioned #223 the refinement but I can't find any documentation about it.

I have experience from Java validation JSR 303, but I don't understand the basics....

I would like to have a complex form with name, surname, email, password, confirmPassword. Here (#223) is in refinement structure with two fields and this is passed to the

The questions are:

1. how to describe more field with another validation rules (email)
2. how to render error message for the confirmPassword field only (the samePasswords).
3. is there any fully customized form (with the templates)

I know this issue is more complex but I please for another help.

thanks Mila

[benmonro]

Mila, I've found the guide to be quite helpful in understanding how to use tcomb. For refinements (aka subtypes) you can find info on that here: https://github.com/gcanti/tcomb-form/blob/master/GUIDE.md#subtypes

as for the password error message you can use a custom error message which you can then attach to your refinement. https://github.com/gcanti/tcomb-form/blob/master/GUIDE.md#customised-error-message note that in that example he's using t.subtype, which has been deprecated in favor of t.refinement.

@gcanti you should probably update the guide. some of the examples show t.subtype and some show t.refinement.

[mvlach]

Hi, I'm trying to use the refinement but I'm using the version 0.6.4. I don't like to upgrade due to the react version. But, at this time I get this error

/Work/node/tcomb-forms-evaluation/dest/shared/MyApp.js:42
var Type = _tcombForm2['default'].refinement(_tcombForm2['default'].struct({
                                  ^

TypeError: _tcombForm2.default.refinement is not a function
    at Object.<anonymous> (/Work/node/tcomb-forms-evaluation/dest/shared/MyApp.js:42:35)
    at Module._compile (module.js:434:26)
    at Object.Module._extensions..js (module.js:452:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Work/node/tcomb-forms-evaluation/dest/server/server.js:13:22)
    at Module._compile (module.js:434:26)
    at Object.Module._extensions..js (module.js:452:10)

function samePasswords(x) {
    return x.newPassword === x.confirmPassword;
}

const Type = t.refinement(t.struct({
    newPassword: t.String,
    confirmPassword: t.String
}), samePasswords);

[benmonro]

you can use subtype or you can update to 0.6.7 which supports react 13. That said, I just updated to react 14. it took less than a day. its not that bad.

[mvlach]

With the struct it is working ...may thanks :+1:

[gcanti]

you should probably update the guide. some of the examples show t.subtype and some show t.refinement

Should be fixed now, thanks @benmonro

[mvlach]

thanks all :)

I have another question - how can I add template to subtype ?

I need render the struct Type (newPassword, confirmPassword) as the next two divs...

const Type = t.subtype(t.struct({
    newPassword: t.String,
    confirmPassword: t.String
}), samePasswords);

let Person = t.struct({
    name: t.Str,
    surname:t.Str,
    email: Email,
    passwords: Type

});

var formLayout = function(locals){
    debugger;
    return (
        <div>
            <p>formLayout</p>
            <div>{locals.inputs.name}</div>
            <div>{locals.inputs.surname}</div>
            <div>{locals.inputs.email}</div>
            <div>{locals.inputs.passwords}</div>

        </div>
    );
};

[mvlach]

I found solution...

https://github.com/gcanti/tcomb-form/issues/109