simpleSchema@2 nested schema not working.

[danyhiol]

I've the following schema for user profile in meteor:

const Schema = {};

Schema.UserCountry = new SimpleSchema({
    name: {
        type: String,
        defaultValue: 'Germany',
        optional: true,
        allowedValues: ['Gername', 'France', 'US'],
        uniforms: {
            hintText: "Select your country",
        }
    },
    code: {
        type: String,
        regEx: /^[A-Z]{2}$/,
        optional: true,
    }
});

Schema.UserProfile = new SimpleSchema({
    firstName: {
        type: String,
        uniforms: {
            hintText: "First name",
        }
    },
    lastName: {
        type: String,
        uniforms: {
            hintText: "Last name",
        }
    },
    country: {
        type: Schema.UserCountry,
        optional: true
    },
  [ ...]
});

Schema.User = new SimpleSchema({
    emails: {
        type: Array,
    },
    "emails.$": {
        type: Object
    },
    "emails.$.address": {
        type: String,
        label: "Email Address",
        regEx: SimpleSchema.RegEx.Email,
        uniforms: {
            hintText: "Please enter your email"
        }
    },
    "emails.$.verified": {
        type: Boolean,
        optional: true,
        uniforms: {
            component: HiddenField,
            disabled: true,
        }
    },
    password: {
        type: String,
        min: 8,
    },
    confirmPassword: {
        type: String,
        label: "Password Confirmation",
        min: 8,
        custom() {
            if (this.value !== this.field('password').value) {
                return "passwordMismatch";
            }
        },
    },
    createdAt: {
        type: Date,
        defaultValue: new Date(),
        uniforms: {
            component: HiddenField,
            disabled: true,
        }
    },
    updatedAt: { 
        type: Date,
    },
    profile: {
        type: Schema.UserProfile,
        optional: true
    },
   [...]
});

Meteor.users.attachSchema(Schema.User);

export default Schema;

and this in my form:

<AutoForm 
  schema={ Schema.User } 
  showInlineError={ true }
  onSubmit={ doc => console.log("Doc: ", doc)}  
  onSubmitSuccess={() => console.log("Submit Success")}
  onSubmitFailure={() => console.log("Submit Failed")}
>
  <AutoField name="profile.firstName"  />
  <AutoField name="profile.lastName" />
  <AutoField name="profile.country.name"  />
  <AutoField name="emails.$.address"  />
  <SubmitField value="Add User" />
</AutoForm>

1. Submitting this form does not console.log any data ( onSubmit={ doc => console.log("Doc: ", doc)} ).
2. Submit form button is disable when filling out error field. (ie. Fields firstName and lastName are required. If the form is submitted without setting these field, errors are shown. But once these fields are filled and the form has no errors, the submit button is still disabled.)
3. Schema.User has a field emails which is an array of object and emails.$.address is required. When submitting the form, the field (AutoField) 'emails.$.address' is not marked as required.
4. <SubmitField value="Add User" />. SubmitField ``value is always 'SUBMIT' although it is changed to 'Add User'.
5. Underline animation are shown with 2 line. See attachment.
   

"react": "^15.6.1",
"simpl-schema": "^0.3.1",
"uniforms": "^1.19.1",
"uniforms-material": "^1.19.1",
"material-ui": "^0.18.7",

[radekmie]

Hi @danyhiol. I guess there's an error, which is not shown, as you don't have the ErrorsField, which blocks the submit. I'll check it later, but you can do it too. It's easy to check if you have the React devtools.

[radekmie]

Yep, as I guessed: password, confirmPassword and updated is required. Also, using $ in field names outside of <ListField /> results in {emails: {$: {address: 'example'}}}. Maybe you wanted to use 0 instead to set the first one?

About the <SubmitField /> label: in material-ui it's rendered using <RaisedButton />, therefore you have to use label instead.

Anyway, it's all clear now.

[danyhiol]

Yeah adding <ErrorsField/> did it. I taught this is overtaken when enabling inline errors showInlineError={ true }. Do you guys plan to support material-ui@next (or version 1.x.x) I read some comments about it here, but no final announcement was made/published.

[janowsiany]

Yes, when material-ui will be finally released there will be a support for it. At the moment there are too many breaking changes between betas each week.

[radekmie]

Using showInlineError will show only errors related to each field - if there's an error in non-rendered field, it won't show.

Yes, we do plan to support material-ui@1, but it's not released yet. There's an (already outdated) PR: #355. As @janowsiany said - we are waiting for the final release.

[danyhiol]

Great!! One last question that may be related to SimpleSchema2 itself:
How can I make the email address field to be required and display as such in inline-errors?

[radekmie]

All I can think out right now is to create a custom validator for emails.$.address to trigger an error when emails have an error. I've done something similar once - it's not the best solution but works as expected and it's quite easy to do.

[danyhiol]

Year this is what I've in case anyone may face this problem:

custom() {
    if (!this.isSet || this.value === null || this.value === "") {
          return SimpleSchema.ErrorTypes.REQUIRED;
    }
}