I have a form that have a three field group that on a click of a "Add New" buttom other three field group will be added. That part is working great.
I want to add a validation so all three fields are required in order to add a new group.
For reference here is the code working: http://jsfiddle.net/5g8Xc/
var ContactsModel = function(contacts) {
var self = this;
self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function(contact) {
return { firstName: contact.firstName, fathersLast: contact.fathersLast, country: contact.country };
}));
self.addContact = function() {
self.contacts.push({
firstName: "",
fathersLast: "",
country: ""
});
};
self.removeContact = function(contact) {
self.contacts.remove(contact);
};
};
Any clue on how to implement this validation? I was trying to use jquery validation to do that but I think that is possible with KnockoutJS.
Appreciate any advice.
As stated already, the validation plugin will be the most elegant, less re-inventive solution.
Edit: After commentary implementation utilizing validation plugin
With that aside, you have a couple options.
If you are confident the contact object will always contain only required fields, a not very robust implementation would be iterate over the properties of the contact ensuring each has some value.
A little more robust, but still lacking the elegance of the plugin, implementation would be to maintain an array of required fields and use that array for validation. You can reference my example for this setup. Essentially, each required property is mapped to observables. Changes made to the value of any observable property triggers (via a subscription) a mutation call for a dummy observable that is used in a computed. This is required since a computed can't call valueHasMutated. The mutation call triggers the computed to reevaluate, thus updating the UI.
Related
I have a model:
export default Model.extend({
title: attr('string'),
attributes: attr('jsonb')
});
Where attributes is a custom json filed stored as jsonb in Postgres.
let say:
{
"name":"Bob",
"city":""
}
So I can easily manipulate attributes using template
<form.element .. #property="attributes.city"/> or model.set('attributes.city','city name')
Problem: hasDirtyAttributes do not changing because technically we have old object. But when I try to copy object let say
JSON.parse(JSON.stringify(this.get('attributes')) hasDirtyAttributes works as expected
So how to write some Mixin for a Model or other workaround which on the change of any attribute property will mark hasDirtyAttributes as true. I will update whole object so doesn't matter which property actually was changed.
Same problem: https://discuss.emberjs.com/t/hasdirtyattributes-do-not-work-with-nested-attributes-json-api/15592
existing solution doesn't work for me at all:
ember-dirtier
ember-data-relationship-tracker
ember-data-model-fragments (a lot of changes under the hood and broke my app)
Update:
Some not perfect idea that help better describe what I'm want to achieve:
Let say we adding observer to any object fileds:
export default Model.extend({
init: function(){
this._super();
this.set('_attributes', Object.assign({}, this.get('attributes'))); //copy original
Object.keys(this.get('attributes')).forEach((item) => {
this.addObserver('attributes.'+ item, this, this.objectObserver);
});
}
...
})
And observer:
objectObserver: function(model, filed){
let privateFiled = '_' + filed;
if (model.get(privateFiled) != model.get(filed)) { //compare with last state
model.set(privateFiled, this.get(filed));
model.set('attributes', Object.assign({}, this.get('attributes')) );
}
}
It's works, but when I change one filed in object due to copying object objectObserver faired again on every filed. So in this key changing every filed in object I mark observed filed as dirty
The further ember development will reduce using of event listener and two-way binding, actually Glimmer components supports only One-way Data Flow. So to be friendly with future versions of emberusing one-way data flow is good approach in this case to. So In my case as I use ember boostrap solution looks like
<form.element #controlType="textarea" #onChange={{action 'attributeChange'}}
where attributeChange action do all works.
New Glimmer / Octane style based on modifier and looks like:
{{!-- templates/components/child.hbs --}}
<button type="button" {{on "click" (fn #onClick 'Hello, moon!')}}>
Change value
</button>
I'm building a form using json-schema-form and am using this library.
https://www.npmjs.com/package/angular6-json-schema-form
This looks great but I have one problem.
After submitting, I want to clear the form, but it's impossible.
I couldn't find out the method in the document, and also searched the stackoverflow and googled, but got no solution.
So I cleared the form using Javascript after submitting, but the form data seems to be saved somewhere, so it's possible to resubmitting without any action.
Here is the code
<json-schema-form
*ngIf="isInquireForm"
class="contact-form"
loadExternalAssets="true"
framework="no-framework"
[options]="inquireFormOption"
[schema]="inquireFormSchema"
[form]="inquireFormLayout"
(onSubmit)="onInquireSubmit($event)"
(isValid)="inquireIsValidFn($event)"
(validationErrors)="inquireValidationErrorsFn($event)">
</json-schema-form>
You need to create an object to populate the form with default values and bind it to the json schema form component. When you need to reset, clear the data in the object.
data = {
first_name: "abc",
last_name: "xyz"
}
<json-schema-form
*ngIf="isInquireForm"
class="contact-form"
loadExternalAssets="true"
framework="no-framework"
[options]="inquireFormOption"
[schema]="inquireFormSchema"
[form]="inquireFormLayout"
[(data)]="data"
(onSubmit)="onInquireSubmit($event)"
(isValid)="inquireIsValidFn($event)"
(validationErrors)="inquireValidationErrorsFn($event)">
</json-schema-form>
And to clear the form, reset data
data = {
first_name: "",
last_name: ""
}
I have an Ember app consuming a rails based webservice.
On the Rails side, I have some enums, they are simply arrays.
Now, I would like to retreive those enums in the Ember app, and render them for select values.
The webservice returns a JSON response :
get '/grades.json'
{"grades":["cp","ce1","ce2","cm1","cm2"]}
On the Ember side, I created a GradesRoute like this :
App.GradesRoute = Ember.Route.extend({
model: function () {
return Em.$.getJSON('api/v1/grades.json')
}
}));
Then, I think I need it in the controllers where these enums are in use:
App.StudentsController = Ember.ArrayController.extend({
needs: ['grades'],
grades: Ember.computed.alias('controllers.grades')
}
));
So at least I thought I could iterate over the grades in the students template.
{{#each grade in grades}}
{{grade}}
{{/each}}
But I get no output at all... debugging from the template and trying templateContext.get('grades').get('model') returns an empty array []
Any idea on how I could load and access this data ?
So I ended up with ApplicationRoute, which is the immediate parent of StudentsRoute, so needs is relevant in this case.
App.ApplicationRoute = Ember.Route.extend({
setupController: function(controller) {
Em.$.getJSON('api/v1/enums.json').then(function(data){
controller.set('grades', data['grades']);
controller.set('states', data['states']);
}
}
});
Now I can create an alias for each enums I need to use accross my app.
App.StudentsController = Ember.ArrayController.extend({
needs: ['application'],
grades: Ember.computed.alias('controllers.application.grades'),
states: Ember.computed.alias('controllers.application.states')
});
I'm still not confident enough to be sure this is the way to go, any suggestion is welcome !
You just have some of your paths mixed up. In StudentsController, controllers.grades refers to the actual controller, not it's model. The following code should clear things up as it's a bit more explicit in naming.
App.StudentsController = Ember.ArrayController.extend({
needs: ['grades'],
gradesController: Ember.computed.alias('controllers.grades'),
grades: Ember.computed.alias('gradesController.model.grades')
});
Also, be aware that using needs only works if your grades route is a direct parent of your students route. If it's not a direct parent, you won't get back the data you want.
Hi I'm kind of new to Knockoutjs, I am in the scenario where I want to post a form where I have for example an email address, there is an requirement that the email address needs to be unique.
On the server I check if the email address is unique or not and then returns an validationjson class for example
{
isEmailUnique: false,
isPasswordStrongEnough: true;
}
How can I with knockoutjs validation show these errors in a neat way?
I would use two different server side validators for this, since they affect different observables in the view model.
Originally taken from the knockout validation readme
ko.validation.rules['isEmailUnique'] = {
validator: function(val, param){
var isValid = true;
$.ajax({
async: false,
url: '/validation/isEmailUnique',
type: 'POST',
data: { value: val, param: param },
success: function(response){
isValid = response === true;
},
error: function(){
isValid = false; //however you would like to handle this
}
});
return isValid;
},
message: 'The Email is not unique'
};
Then on the server you need to create an endpoint that accepts POST requests where you perform your lookup and then return true or false depending on the result of the query.
To use the above validator
this.email = ko.observable()
.extend({
isEmailUnique: {
message: 'Something else perhaps? It will override the message in the validator'
}
});
You can use the very same thing for the password strength validation.
Using validators like this will fire validation when the observable changes, which can be a useful way to do validation.
I'm a bit late, but for my 2 cents worth, I would take a more generic approach such as returning a standard JSON serialized AjaxResult class from your server endpoints (such as /Register) with properties such as Data (an arbitrary container used for, for example, an updated model to re-bind with the mapping plugin), and a collection of validation message strings, etc. Then you could have an HTML validation summary which is bound to an ObservableArray and push / map the messages from your Ajax result into there. This is essentially what I've been doing with Knockout and it works nicely.
I am currently having trouble of reloading a json store with new parameters. Here is my store:
newsletters = new Ext.data.JsonStore({
url: '/newsletters/',
root: 'results',
fields: [
'id',
'body'
'recipients'
],
baseParams: { command: 'json', to: dateTo, from: dateFrom },
autoLoad: true
});
dateTo and dateFrom are initally empty strings ( '' ) and checking in firebug /newsletters is called with the correct parameters.
Now none of the following techniquest work:
Changing the values of dateTo and dateFrom then calling newsletters.reload() still calls the page with the parameters to and from being empty strings.
Calling newsletters.reload( { to: 'test1', from: 'test2' } ); still sees the parameters as empty strings.
Finally as from the manual I have tried:
lastOptions = newsletters.lastOptions;
Ext.apply(lastOptions.params, {
to: 'test1',
from: 'test2'
});
newsletters.reload(lastOptions);
This again does not request /newsletters with the updated parameters.
Any advice appreciated!
You can actually pass params object to the load() method
newsletters.load({
params: {to: 'test1', from: 'test2'}
})
From the docs, you can probably do :
store.setBaseParam('to', dateTo);
Now, if I understand correctly, you want your baseParams to be changed whenever dateTo and dateFrom are changed.
You could try :
var dateTo = '', dateFrom = '';
store.on('beforeload', function(s) {
s.setBaseParam('to', dateTo);
s.setBaseParam('from', dateFrom);
});
// This should work :
dateTo = 1;
dateFrom = 2;
store.load();
My problem was: I have a store that shall request data over a proxy to back-end. This request shall hold a parameter named filter, which will just help back-end to decide which is the set of result the client is interested in. This parameter is loaded from a Combobox or some other component which the user can use to express which filter shall be used.
From my point of view the parameters shouldn't be set to the Store and neither using the load parameter. I will explain why:
Configuring parameters to the store would imply that every other component using the same store will have this parameters configured, meaning you can have concurrence problems.
And on the second case, it is not interesting to have it configurable over load method, because you don't wanna every single time explicit make use of the load method by your self, remember that there are already some components like paging and custom components that triggers this method.
What would be the right way from my point of view:
Every time that a load is triggered, we just attach the additional parameter in a non-intrusive way. Meaning that the trigger will not need to have any change (remember here trigger could be any component that executes store.load()) and the store shall be not aware about this new parameter.
You can see here clearly that this shall be an operation done before request data to proxy, and in my case I implemented as a listener for the beforeload event. When beforeload is executed, I just aggregate the new parameters to the operation parameter of the listener that according documentation is: beforeload( store, operation, eOpts ). The final implementation is something like:
store.on({
beforeload: function (store, operation, opts) {
Ext.apply(operation, {
params: {
filterName: Ext.getCmp('filterCombo').getValue()
}
});
}
});