Hi

If I put an invalid value in my form, I get a nice error message in my template and the submit function isn't called. But I also get an error message in the developer console:

bs-form.js:28 Uncaught (in promise) Error
    at BsFormWithChangesetValidationsSupport.validate (bs-form.js:28:1)
validate                            @ bs-form.js:28
Promise.then (async)
iterations                          @ backburner.js:18
[...stack trace...]

How can I catch this error? And why do I even have to catch this error? Or do I miss something else?

Thanks for your help and all your work

Not sure if this is the right place.

I have a user model with name, password, passwordConfirmation fields. I've commented out password and passwordConfirmation from the form but the validations still fail on the password field in the changeset.

Expected Behavior:
Validations should only run on the fields present in the form.

As a side note, I've experienced the same issue with the ember-bootstrap-cp-validations. Validations seem to fire on fields that are absent from the form but have validations defined on them.

Hello,
Starting from your dummy app, I'm trying to get access to the results of the changeset from the controller's submit() function, to run changeset.execute for instance.

So, instead of using the changeset template helper:

{{#bs-form model=(changeset model validation) action=(action "submit") invalid=(action "invalid")}}
    {{bs-form-element label="Name" property="name"}}
    {{bs-button type="primary" buttonType="submit" defaultText="Submit"}}
{{/bs-form}}

I'm trying to create the changeset from javascript:

The template :

{{#bs-form model=changeset action=(action "submit") invalid=(action "invalid")}}
    {{bs-form-element label="Name" property="name"}}
    {{bs-button type="primary" buttonType="submit" defaultText="Submit"}}
{{/bs-form}}

and in the controller :

  init() {
    this.changeset = new Changeset(this.get('model'), this.get('validation'));
  },

But if I do so, the validations seems to be ignored (textfields always validate).

What is the correct way to get the changeset ? It would be great if the changeset could be returned as a parameter (ie submit(changeset) {}), but I don't know how to do this.

Thanks in advance !

Ember Changeset Validations by default populates an array with strings containing error messages. However, it does not support the option "rawOutput", which uses more flexible objects instead of strings.

Noticed the latest release has not been pushed to npm.

Ember Bootstrap Changeset Validations throws an error without an error message if the model is invalid:

This addon should work with that version, but we do not explicitly state that, and also don't test it.

We could either:

• add an additional test scenario for v4 (or add another dimensions to the test matrix to test v4 w/ all existing scenarios / Ember versions)
• drop support for v3 and release a new major

@jelhan thoughts?

Hi, I started looking at this add-on because I was already using ember-bootstrap and wanted to add validation to my forms using ember-changeset. Unless I am doing something wrong, it seems like I need to manually execute the changeset with changeset.execute() if I want to apply the changes to the data model that the changeset wraps.

I understand that I can call save() etc. on the changeset object, but until recently where the model for the form submission wasn't being passed along to the action I was working with my model references directly. It seems like it would it make sense to me to automatically execute the changes (provided that they are valid) following validation but before executing the submit action.

If this sounds like it would be a good idea, I can work on a pull request for it. If not, can you advise on a recommended best practice?

Upgrading to ember-changeset(-validations) version ~3 breaks this addon. I'm not seeing validation messages or styles on form controls when the changeset is invalid.

See ember-bootstrap/ember-bootstrap-cp-validations#18

Ember Changeset v4, which has been released recently, should be supported. It is currently locked to v3: https://github.com/kaliber5/ember-bootstrap-changeset-validations/blob/d11f9cf84c467f9bcfa001763fb13613f50244d1/package.json#L31

We might be able to widen the SemVer range to allow v3 and v4 at the same time. That would be the best solution in my perspective. When doing so we should ensure that we run our tests for both versions.

If that is not possible, we should drop support for v3 and release a new major.

Given a validation of a nested property:

export default {
  amount: {
    value: [
      validatePresence(true),
      validateNumber({ integer: true }),
    ]
  }
};

How should a form element access the property in order to trigger the validation?

<form.element
        @controlType='input'        
        @property='amount.value'
      />

doesn't seem to trigger the validation for me.

A list of breaking changes, which we should include in v6.0.0:

• Drop support for node 12
• Drop support for Ember 3.24
• Add peer dependencies for Ember Bootstrap, Ember Changeset Validations, and others
• ...

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Failed to decrypt field token. Please re-encrypt and try again.

I've got what is effectively an editable list of records. There are multiple forms on a single page and a single Save button save()s the dirty changesets all in one go. This works well from a UX perspective, but it doesn't quite fit the standard pattern for validating a changeset and preventing form submission if there are errors, as this library does so well.

I'm trying to figure out how to show validation messages below the appropriate form field.

I'm doing the following:

await RSVP.all(allChangesetsToSave.map(changeset => changeset.save()))

I'd like to prevent the mass-save if any of the changesets are invalid and then show the correct error message. I was hoping this would happen automatically but it doesn't seem to.

I thought about preventing the save() like this:

const validateResults = await RSVP.all(allChangesetsToSave.map(changeset => changeset.validate()))
const validationsPassed = allChangesetsToSave.every(changeset => isEmpty(changeset.errors))

And then conditionally calling save() on all of the changesets but I'm missing the piece where the error messages get displayed on the forms.

Any guidance would be greatly appreciated!

When I'm typing somethig in input login and pressed enter it calls login function, which will transition user to other route - and then the error shows up. I think validation on this field occured on some focus out event, when ember is transitioning to another route, and something is wrong.

I have simple form:

<BsForm @model={{this.model}} @onSubmit={{this.login}} as |form|>
  <form.element @controlType="text" @label="Login" @property="user"/>
  <form.submitButton @defaultText="Login" />
</BsForm>

and my login function looks like this:

@action
login() {
  return this.transitionToRoute('password');
}

Error:

Uncaught (in promise) Error: Assertion Failed: You attempted to update `showOwnValidation` on `BsFormElementWithChangesetValidationsSupport`, but it had already been used previously in the same computation.  Attempting to update a value after using it in a computation can cause logical errors, infinite revalidation bugs, and performance issues, and is not supported.

`showOwnValidation` was first used:

- While rendering:
  -top-level
    application

Stack trace for the update:
    at dirtyTagFor (validator.js:575)
    at setter (validator.js:861)
    at BsFormElementWithChangesetValidationsSupport.set [as showOwnValidation] (index.js:3959)
    at BsFormElementWithChangesetValidationsSupport.showValidationOnHandler (element.js:680)
    at BsFormElementWithChangesetValidationsSupport.showValidationOnHandler (element.js:73)
    at clear (runtime.js:286)
    at UpdatableBlockImpl.reset (runtime.js:1197)

ember-changeset@v3 and ember-bootstrap haven't played well together cause one was using tracked properties (ember-changeset) and the other one was still using computed properties (ember-bootstrap). Faced some compatibility issues between both of them. Especially with computed properties that depend on state derived from a tracked property.

I added a hack in #19, which was using internal APIs of ember-changeset to work-a-round that issue. This seems to not working anymore with latest ember-changeset / ember-changeset-validations versions.

See ember-bootstrap/ember-bootstrap#1017.
Reproduction: https://ember-twiddle.com/0d0a0f211c818a5300b4deaac7e159d6?openFiles=validators.form%5C.js%2C

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Datasource	Name	Replacement PR?
npm	babel-eslint
npm	eslint-plugin-node
npm	npm-run-all
npm	release-it-lerna-changelog

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Replace dependency npm-run-all with npm-run-all2 5.0.0
• Update dependency ember-focus-trap to v1.0.2
• Update dependency ember-source to v4.7.1
• Update dependency eslint-plugin-qunit to v7.3.4
• Update dependency qunit to v2.19.4
• Update dependency @ember/optional-features to v2.1.0
• Update dependency @ember/test-helpers to v2.9.4
• Update dependency ember-auto-import to v2.7.4
• Update dependency ember-focus-trap to v1.1.0
• Update dependency ember-resolver to v8.1.0
• Update dependency ember-source to v4.12.4
• Update dependency ember-template-lint to v4.18.2
• Update dependency eslint-config-prettier to v8.10.0
• Update dependency prettier to v2.8.8
• Update dependency qunit to v2.21.0
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update dependency @ember/test-helpers to v3
• Update dependency @embroider/test-setup to v4
• Update dependency ember-bootstrap to v6
• Update dependency ember-cli to v5
• Update dependency ember-cli-babel to v8
• Update dependency ember-page-title to v8
• Update dependency ember-qunit to v8
• Update dependency ember-resolver to v12
• Update dependency ember-source to v5
• Update dependency ember-template-lint to v6
• Update dependency ember-try to v3
• Update dependency eslint to v9
• Update dependency eslint-config-prettier to v9
• Update dependency eslint-plugin-ember to v12
• Update dependency eslint-plugin-prettier to v5
• Update dependency eslint-plugin-qunit to v8
• Update dependency prettier to v3
• Update dependency qunit-dom to v3
• Update dependency release-it to v17
• Lock file maintenance
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency webpack to v5.76.0 [SECURITY]
• Replace dependency babel-eslint with @babel/eslint-parser 7.11.0
• Replace dependency eslint-plugin-node with eslint-plugin-n 14.0.0
• Update dependency ember-auto-import to v2.4.3
• Update dependency ember-cli-dependency-checker to v3.3.2
• Update dependency ember-changeset to v4.1.2
• Update dependency ember-changeset-validations to v4.1.1
• Update dependency ember-cli to v4.12.3
• Update dependency bootstrap to v5
• Update dependency release-it-lerna-changelog to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

The following deprecation shows up due to old version of ember-cli-version-checker

DEPRECATION: An addon is trying to access project.nodeModulesPath. This is not a reliable way to discover npm modules. Instead, consider doing: require("resolve").sync(something, { basedir: project.root }). Accessed from:   new NPMDependencyVersionChecker (<project_root>/node_modules/ember-bootstrap-changeset-validations/node_modules/ember-cli-version-checker/src/npm-dependency-version-checker.js:11:33)

The observer in the bs-form that validates the model on init causes a double render in some cases. Perhaps it should be configurable? Specifically if you render a form in a bs-modal.body and reference the changeset in the bs-model.header or footer.

addon/components/bs-form.js is still using EmberObject.extend(): https://github.com/kaliber5/ember-bootstrap-changeset-validations/blob/d11f9cf84c467f9bcfa001763fb13613f50244d1/addon/components/bs-form.js#L6 It should be refactored to use a native class.

This blocks refactoring the base component in Ember Bootstrap to a glimmer component: ember-bootstrap/ember-bootstrap#1775 (comment)

Hi there - am new to Ember and struggling with this concept. I want to access the changeset inside my handlebars template ... like so

{{#bs-form model=(changeset person PersonValidations) onSubmit=(action "submit") as |form|}}

  {{#if changeset.isInvalid}}  invalid ! {{else}}  well done. {{/if}}

  {{form.element controlType="text" label="First Name" placeholder="First Name" property="firstName"}}
  {{form.element controlType="text" label="Last Name" placeholder="Last Name" property="lastName"}}
  {{form.element controlType="email" label="Email" placeholder="Email" property="email"}}
  {{bs-button defaultText="Submit" type="primary" buttonType="submit"}}
{{/bs-form}}

Obviously, changeset isn't populated cuz it's being passed dynamically.

I tried to create the changeset at the component level ... but even though it appears to do the same thing on the console the actual validations aren't working.

import Ember from 'ember';
import Changeset from 'ember-changeset';
import PersonValidations from '../../../validations/person';

export default Ember.Component.extend({
  init(...args) {
    this._super(...args);
    const model = this.get('person');
    this.changeset = new Changeset(model, PersonValidations);
  },
  PersonValidations,
});

Can you help point me in the right direction?

Extending BsForm is deprecated in ember-bootstrap 4. How would this addon need to change to keep working?

Extending from ember-bootstrap component classes is not supported, and might break anytime. Detected subclassing of <BsForm> component.

2VM5842:94 Ember Inspector (Deprecation Trace): Extending from ember-bootstrap component classes is not supported, and might break anytime. Detected subclassing of <BsForm> component.

        at HANDLERS.<computed> (https://localhost:4201/assets/vendor.js:43285:9)
        at invoke (https://localhost:4201/assets/vendor.js:43297:9)
        at Object.deprecate (https://localhost:4201/assets/vendor.js:43253:28)
        at Class.target.init (https://localhost:4201/assets/vendor.js:171258:94)
        at initialize (https://localhost:4201/assets/vendor.js:35968:9)
        at Function.create (https://localhost:4201/assets/vendor.js:36517:9)
        at Function.superWrapper (https://localhost:4201/assets/vendor.js:37641:22)
        at Function.create (https://localhost:4201/assets/vendor.js:108845:29)
        at Function.superWrapper [as create] (https://localhost:4201/assets/vendor.js:37641:22)

After installing ember-bootstrap-changeset-validation, attempting to use bs-form in my template results in the following error message:

Uncaught Error: Could not find module `ember-bootstrap/components/bs-form` imported from `ember-bootstrap-changeset-validations/components/bs-form`

Dependencies from package.json below in case that helps. Is there anything else I can provide to help diagnose this issue?

  "devDependencies": {
    "@html-next/vertical-collection": "^1.0.0-beta.10",
    "a11y-announcer": "^1.0.2",
    "babel-plugin-module-resolver": "^2.7.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "bootstrap": "^4.0.0",
    "broccoli-asset-rev": "^2.4.5",
    "broccoli-funnel": "^2.0.1",
    "ember-a11y": "^0.1.15",
    "ember-a11y-landmarks": "^1.0.1",
    "ember-a11y-testing": "^0.5.0",
    "ember-ajax": "^3.0.0",
    "ember-bootstrap": "^1.2.1",
    "ember-bootstrap-changeset-validations": "^1.0.0",
    "ember-changeset": "^1.5.0-beta.0",
    "ember-changeset-validations": "^1.2.11",
    "ember-cli": "~3.0.0",
    "ember-cli-app-version": "^3.0.0",
    "ember-cli-babel": "^6.11.0",
    "ember-cli-chai": "^0.4.3",
    "ember-cli-code-coverage": "^0.4.2",
    "ember-cli-dependency-checker": "^2.0.0",
    "ember-cli-eslint": "^4.2.1",
    "ember-cli-htmlbars": "^2.0.1",
    "ember-cli-htmlbars-inline-precompile": "^1.0.0",
    "ember-cli-inject-live-reload": "^1.4.1",
    "ember-cli-mirage": "^0.4.1",
    "ember-cli-moment-shim": "^3.5.0",
    "ember-cli-page-object": "^1.13.0",
    "ember-cli-qunit": "^4.3.2",
    "ember-cli-sass": "^7.0.0",
    "ember-cli-shims": "^1.2.0",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-template-lint": "^0.7.5",
    "ember-cli-uglify": "^2.0.0",
    "ember-cli-update": "^0.14.0",
    "ember-component-css": "^0.6.0",
    "ember-component-focus": "^0.2.3",
    "ember-data": "~3.0.0",
    "ember-debug-logger": "^1.1.0",
    "ember-export-application-global": "^2.0.0",
    "ember-faker": "^1.2.1",
    "ember-i18n": "^5.0.2",
    "ember-lifeline": "^2.0.0",
    "ember-load-initializers": "^1.0.0",
    "ember-maybe-import-regenerator": "^0.1.6",
    "ember-native-dom-helpers": "^0.5.4",
    "ember-power-select": "^2.0.0-beta.3",
    "ember-raf-scheduler": "^0.1.0",
    "ember-resolver": "^4.0.0",
    "ember-route-action-helper": "^2.0.6",
    "ember-simple-auth": "^1.5.1",
    "ember-sinon": "^1.0.1",
    "ember-sinon-qunit": "^2.0.0",
    "ember-source": "~3.0.0",
    "ember-svg-jar": "^0.12.0",
    "ember-template-lint": "^0.8.9",
    "ember-test-selectors": "^0.3.7",
    "ember-welcome-page": "^3.0.0",
    "eslint": "^4.9.0",
    "eslint-plugin-ember": "^5.0.0",
    "eslint-plugin-itemsense-ui": "^1.0.2",
    "loader.js": "^4.2.3",
    "qunit-dom": "^0.4.0"
  },
  "engines": {
    "node": "^4.5 || 6.* || >= 7.*"
  },
  "dependencies": {
    "ember-flatpickr": "^2.3.0",
    "ember-get-config": "^0.2.4",
    "ember-websockets": "^7.1.1",
    "jquery": "~3.2.1",
    "liquid-fire": "^0.29.0",
    "mock-socket": "^7.1.0",
    "open-iconic": "^1.1.1",
    "popper.js": "^1.12.9",
    "qunit-dom": "^0.4.0",
    "rsvp": "^4.7.0"
  },

After upgrading EB to its version 4.2.0.
I get this error You attempted to use @dependentKeyCompat on a property that already has been decorated with either @computed or @tracked....
After a little debug it comes from the class BsFormElementWithChangesetValidationsSupport with the errors getter.