@model-updated not working in newer versions

[piwonesien]

Note: for support questions, please use stackoverflow. This repository's issues are reserved for feature requests and bug reports.

• I'm submitting a ...
  • bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

• Do you want to request a feature or report a bug? bug

• What is the current behavior?
  "Model updated"-event is not fired anymore in newer versions.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem
  I used the demo fiddle and add an update method which create a console output. With version 2.1.1 every time I change the model, a console output is created. In version 2.3.2 nothing happens.

Version 2.1.1: https://jsfiddle.net/hv3ktyag/ -> it's working
Version 2.3.2: https://jsfiddle.net/qz90dwxy/ -> not working

• What is the expected behavior?
  The model-updated event should fired, when the model is updated

• What is the motivation / use case for changing the behavior?

• Please tell us about your environment:

  • Version: [2.3.2]
  • Browser: [all]
  • Language: [all | TypeScript X.X | ES6/7 | ES5 | Dart]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[zoul0813]

This appears to be due to @model-updated not being caught in formGenerator when using the schema fields, as opposed to groups.

I'll submit a PR to fix this, but I would recommend updating your schema's to use 'groups' instead of the generic 'fields'. Groups offers a lot more flexibility with how your form is laid out ... the format is the same, except you can break the form up into different groups of fields.

V3 may not support the fields option at all

schema: {
    groups: [
        {
            "legend": "Some (Optional) Legend Text",
            "styleClasses": "form-row",
            "fields": [
                {
                    type: "input",
                    inputType: "text",
                    label: "ID (disabled text field)",
                    model: "id",
                    readonly: true,
                    disabled: true
                }
            ]
        },
        {
            "legend": "Another (Optional) Legend",
            "styleClasses": "form-row",
            "fields": [
                {
                    type: "input",
                    inputType: "text",
                    label: "Name",
                    model: "name",
                    placeholder: "Your name",
                    featured: true,
                    required: true
                },
                {
                    type: "input",
                    inputType: "password",
                    label: "Password",
                    model: "password",
                    min: 6,
                    required: true,
                    hint: "Minimum 6 characters",
                    validator: VueFormGenerator.validators.string
                }
            ]
        }
    ]
}

You can change the fieldset tag to a div or any other tag by passing a tag property into <vue-form-generator tag="div" ... />