Add asterisk for required fields when type is dynamic

[anpr]

Version

• tcomb-form v0.9.7
• react v0.14.8

  Preliminaries

I have a form that uses a template, and the type of the form is dynamic, meaning I have different fields (which are mandatory or optional) depending on the value of another field:

// ...
let form_type_obj = {
    country: t.String,
  };

if (some_condition(this.state)) {
  form_type_obj.en_name = some_other_condition(this.state) ? t.String: t.maybe(t.String);
}

form_schema = t.struct(form_type_obj);
// ...

Problem

I want to put an asterisk after each mandatory field in the form (like it is discussed here).

const formLayout = (locals) => {
    return (
      <div>
        <div className="row">
          <div className="col-md-12">
            <div>{locals.inputs.country}</div>
          </div>
        </div>
        {some_condition(this.state) ?
        <div className="row">
          <div className="col-md-12">
            <div>{locals.inputs.en_name</div>
          </div>
        </div>: undefined
        }
      </div>
    );

How can I know at this point whether en_name is mandatory or not? Does locals somehow provide this information, e.g. locals.attributes.en_name.is_mandatory()?

I suppose I could also use some_other_condition() in the formLayout, but the actual conditions are more complex than in the example I tried to give above, so if it were possible to dynamically retrieve the type it would make my job easier :)

[gcanti]

Hi @anpr,

there are at least 2 ways I can think of:

• Override i18n (simplest):

t.form.Form.i18n.required = ' *'
t.form.Form.i18n.optional = ''

• Using runtime type introspection (i.e. inspect locals.typeInfo)

const Type = t.struct({
  country: t.String,
  en_name: t.maybe(t.String)
})

import classnames from 'classnames'

const myTemplate = t.form.Form.templates.textbox.clone({
  renderLabel: (locals) => {
    const className = {
      'control-label': true,
      'required': locals.typeInfo.type.meta.kind !== 'maybe' // <= and then define a .required class as in the link you posted
    }
    return <label htmlFor={locals.attrs.id} className={classnames(className)}>{locals.label}</label>
  }
})

const options = {
  fields: {
    country: { template: myTemplate },
    en_name: { template: myTemplate }
  }
}

[gcanti]

Closing, please reopen if you need more help

[anpr]

Thanks a lot this helped us and was spot-on :)