75858

Aurelia validating nested objects

Question:

I'm trying to validate an object property of an Aurelia ViewModel.

ViewModel

@autoinject class AddUserForm { user: User; controller: ValidationController; constructor(controllerFactory: ValidationControllerFactory) { this.controller = controllerFactory.createForCurrentScope(); } validate() { this.controller.validate.then(res => { console.log(res.valid); }) } } ValidationRules .ensure((u: User) => u.id).displayName('User').required() .on(AddUserForm)

ViewModel -> View

<template> <form click.trigger="validate()"> <input type="text" value.bind="user.id & validate" /> </form> </template>

User

class User { id: string }

The issue I'm having is that the validator is not picking up the nested user object. I'm I missing something to get this working? I read the <a href="http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics/6" rel="nofollow">docs</a> and it seems like this should work. I'm using version ^1.0.0 of the plugin.

Answer1:

The problem is in your ValidationRules:

ValidationRules .ensure((u: User) => u.id).displayName('User').required() .on(AddUserForm)

needs to be

ValidationRules .ensure((u: User) => u.id).displayName('User').required() .on(User)

Then to get the controller to run this rule you either need to include "& validate" somewhere in your value.bind <em>for that property</em>, like this:

<input value.bind="user.id & validate" />

or before you call controller.validate(), add the entire object to the controller like this:

this.controller.addObject(this.user);

I use .addObject <em>all the time</em> because it causes validation to run on properties that aren't included in your markup, and I find I prefer that.

Answer2:

This caused an error when I tried it:

validate() { this.controller.validate(res => { console.log(res.valid); }) }

.validate() expects a ValidateInstruction, in your example you're giving (res: any) => void. I would try changing to this instead:

this.controller.validate().then(res => { console.log(res.valid); });

Leaving .validate() undefined will cause it to validate all objects and bindings, and .then() will execute after that validation has completed. This worked for me when I tried it in my test project.

If I misunderstood your question and this alone does not solve it however, you could also try assigning the User objects id to a property in AddUserForm like this:

public userId = this.user.id;

And changing your ValidationRules and view accordingly:

<strong>ViewModel</strong>

ValidationRules .ensure((u: AddUserForm) => u.userId) .displayName("User") .required() .on(this);

<strong>View</strong>

<template> <form click.delegate="validate()"> <input type="text" value.bind="userId & validate" /> </form> </template>

Recommend

  • Contains filter on Microsoft Graph query not working
  • passing parameter from aspx to javascript issue
  • MVC: How do you give a viewmodel a list and correctly output it on .cshtml
  • Set comboBox to custom display format
  • 2-table interaction: insert, get result, insert
  • How to add a focus style to an editable ComboBox in WPF
  • Django invalid literal for int() with base 10
  • Does Mobilefirst provide a provision to access web services directly?
  • xtable package: Skipping some rows in the output
  • C++ Partial template specialization - design simplification
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • java.lang.NoClassDefFoundError: com.parse.Parse$Configuration$Builder on below Lollipop versions
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • MySQL WHERE-condition in procedure ignored
  • what is the difference between the asp.net mvc application and asp.net web application
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • Web-crawler for facebook in python
  • VB.net deserialize, JSON Conversion from type 'Dictionary(Of String,Object)' to type '
  • Cannot Parse HTML Data Using Android / JSOUP
  • Data Validation Drop Down Box Arrow Disappearing
  • Matrix multiplication with MKL
  • SQL merge duplicate rows and join values that are different
  • Codeigniter doesn't let me update entry, because some fields must be unique
  • WPF Applying a trigger on binding failure
  • trying to dynamically update Highchart column chart but series undefined
  • Proper way to use connect-multiparty with express.js?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How to set the response of a form post action to a iframe source?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • How do you join a server to an Active Directory (domain)?
  • How do I configure my settings file to work with unit tests?
  • Getting Messege Twice Using IMvxMessenger
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • Does armcc optimizes non-volatile variables with -O0?
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • java string with new operator and a literal
  • How to load view controller without button in storyboard?