Unable to submit the form about ember-validated-form

[czosel]

Hi @g8anusha,

could you please share some code (template and controller/component) that illustrates how you're submitting the form? - I haven't seen this issue before.

Thanks!

[g8anusha]

1. I am not able to use ember-concurrency, by giving a task in the controller. It throws exception, and also the save button doesn't get disabled.
2. Also, a new model is getting created in the validated-form, which doesn't affect the actual model created in the model hook of the route.

app/routes/home.js

model() {
	
	return Ember.RSVP.hash({
		homeModel: this.store.createRecord('homeModel', {});
	});
}

app/controllers/home.js

export default Ember.Controller.extend({
	HomeModelValidations,
	actions: {
		submit: task(function * (model) {
			yield model.save();
		}),
		cancel(model) {
			model.rollback(); // throws exception saying model.rollbackAttributes() is not a function
			this.transitionToRoute('index');
		},
		mutatingGender(model, value) {
			model.set('gender', this.store.peekRecord('gender', value));
			console.log(this.get('model.homeModel.gender')); // displays undefined
		}
	}
});

app/templates/home.hbs

<div class='ml-grid'>
	{{#validated-form model=(changeset model.homeModel HomeModelValidations) on-submit=(action 'submit') as |f|}}
	<div>
		{{f.input value='name' value='name'}}
		
		{{#f.input value='occupation' name='occupation' as |fi|}}
			{{#power-select
				options=occupation
				searchField='occupationName'
				onchange=fi.update
				required=true
				selected=f.model.occupation as |o|}}
			  {{o.occupationName}}
		    {{/power-select}}
		{{/f.input}}
		
		{{#f.input value='gender' name='gender' on-update=(action 'mutatingGender' f.model) as |fi|}}
			{{#each gender as |g|}}
			<div class='radio'>
				{{#one-way-radio 
					name = 'gender'
					value=g.id
					onchange=fi.setDirty
					update=fi.update
					required=true
					option=g.id}}
				{{/one-way-radio}}
				{{g.genderName}}
			</div>
			{{/each}}
		{{/f.input}}
		
		{{f.submit label='Save'}}
		
		<button {{action 'cancel' f.model}}> Cancel </button>
	</div>
	{{/validated-form}}
</div>

Please ignore the css parts for now.

Thanks in advance!

[czosel]

Hi @g8anusha, a quick hint concerning your first point: The ember-concurrency task is not an action, it should be a property:

export default Ember.Controller.extend({
	HomeModelValidations,
	submit: task(function * (model) {
		yield model.save();
	}),
        // ...

I'll get back to you concerning your second poin later! 😄

[g8anusha]

Thanks @czosel, how do I use it in the template then??

[czosel]

Simply

{{#validated-form on-submit=submit  (...) }}

(This should probably be documented in our README... )

[g8anusha]

I tried the above way, it now enters the method, but the submit button is not disabled.

Do I need to give disabled=true manually?? Even with that, its not working!

[czosel]

Hi @g8anusha,

You don't have to specify disabled=true manually. Since I couldn't reproduce your issue I created a twiddle that shows a minimal working demo using ember-concurrency tasks.

I hope that'll help - if not, could you tweak the twiddle to reproduce the problem you're facing?

[g8anusha]

Thanks, I'll have a look at time.

meanwhile, can you give me a solution to the 2nd point I mentioned in the previous comments?

[czosel]

Hi @g8anusha,

Sorry, I totally forgot 😅

I wasn't able to reproduce your issue with rollback. Please see this twiddle for a working demo.

As for the mutatingGender part - the way you implemented this seems quite complex - why not just use a radioGroup (see docs) for this?

[g8anusha]

Hi @czosel , rollback is solved now.

But, the save button doesn't get disabled. In the twiddle it shows to be disabled, but in the local dev env it isn't showing as disabled.

[czosel]

Hi @g8anusha,

I'm happy to hear rollback is working for you now!

Concerning the disabled submit button, we'll need a reproduction to go forward. I'd suggest you try to simplify your local dev environment until it matches the twiddle. Another possibility is to set up a new ember app locally with a minimal example (like in the twiddle) and expand it to the more complex case you have currently. Either way, like this you should be able to find out what's introducing your issue.

You can also try to adapt the fiddle to match the dependency versions you have locally.

Good luck!

[g8anusha]

Hi @czosel,

I had misunderstood the usage of concurrency here using task. I was thinking that save will be disabled until all the fields are filled and valid. But, just now realised that it will be disabled until the save operation is finished. Sorry for that!

But, my question is right in a way. How do I disable the save button until all the fields are filled out?? Is there any way in ember-concurrency to achieve that?

[czosel]

Hi @g8anusha,

Ah, that explains the confusion 😄

Disabling the submit button is not officially supported because we believe it is not great for UX - it might leave people wondering why they can't submit the form. This is especially bad when not all form fields are dirty yet, because then they wouldn't even see any error messages.

I just played around with this a little and it turns out to be possible, though: see this fiddle

Let me know what you think! 😉

[g8anusha]

Hurray! It's working! Thank you :) Will get in touch again if I face any more difficulties. 💯 🥇

[czosel]

Awesome! 👍