Validation errors fail to display when validating a property on a child object in the model

[alastair-mcdonald]

I'm submitting a bug report

• Library Version:
  npm:aurelia-framework@^1.0.0
  npm:aurelia-validation@^1.0.0-beta.1.0.1

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  6.9.3

• NPM Version:
  4.1.1

• JSPM OR Webpack AND Version
  JSPM 0.16.48

• Browser:
  Chrome

• Language:
  TypeScript 2.2

Current behavior:
When validating a property that is within a child object, no error message is displayed when validation fails.
On my system, the validation runs and returns the correct result but no error message is displayed. However in the Gist created to demo this problem the validation does not run when the property bound to is on a child object within the model.

Here is a link to the Gist: https://gist.run/?id=00c1ab9424c03d690f42532ca28cf8d0

This next example works as expected when phone1 is a simple text field.

<input type="text"
	   value.bind="model.phone1 & validateOnBlur"
	   class="form-control" 
	   placeholder="Phone number 1" />

As stated, when model.phone1 is a simple text field validation works as expected, however when binding to

<input type="text"
	   value.bind="model.phone1.text & validateOnBlur"
	   class="form-control" 
	   placeholder="Phone number 1" />

where model.phone1 is an object and the property needing validated is a property on 'model.phone1', validation does run and return the correct result but no error message is displayed when validation fails.

Here is the validation code from the Gist, which is a simplified version of my setup.

ValidationRules.customRule('validPhoneNumber', function (value, obj, whichNumber) {
                var testValue;
                testValue = value;
                if (whichNumber == 2)
                {
                  alert('phone 2 test value is ' + testValue);
                }

                var regex;
                regex = new RegExp(/^(?=.*[0-9]{4})(\+?[0-9 ()\-x?](?:ext\s)?){1,21}$/);
                var result = regex.test(testValue);
                return result;
}, "${$displayName} must be a valid phone number");
            
ValidationRules
  .ensure(a => a.firstName).required()
  .ensure(a => a.lastName).required()
  .ensure(a => a.email).required().email()
  .ensure( a => a.phone1).satisfiesRule('validPhoneNumber', 1)
  .ensure('phone2.text').satisfiesRule('validPhoneNumber', 2)
  .on(RegistrationForm);

For completeness, here is the html for the error message from the Gist

    <div class="form-group">
      <label class="control-label" for="phone2">Phone 2</label>
      <input type="text" class="form-control" id="phone2" placeholder="abc - no validation error"
             value.bind="phone2.text & validate">
    </div>

And here is the html from my setup

<div class="form-group" validation-errors.bind="phone2Errors"
		class.bind="phone2Errors.length ? 'has-error' : ''">
	<div class="col-sm-4">
		<ak-drop-down-list k-data-text-field="text"
						   k-data-value-field="value"
						   k-data-source.bind="phoneNumberTypes"
						   k-enable.bind="true"
						   k-widget.bind="phone2DropDown"
						   k-value.two-way="model.phone2.type">
			<select></select>
		</ak-drop-down-list>
	</div>
<!--
I tried putting validation-errors.bind="phone2Errors" on the next div but it made no difference. 
-->
	<div class="col-sm-7" > 
		<input type="text"
			   id="phone2" name="phone2"
			   blur.trigger="checkState()"
			   value.bind="model.phone2.text & validateOnBlur"
			   maxlength="20"
			   class="form-control" disabled.bind="disableControls"
			   placeholder="Phone number 2" />
		<span class="help-block" repeat.for="errorInfo of phone2Errors">
			${errorInfo.error.message}
		</span>
	</div>
	<div class="col-sm-1"></div>
</div>

Expected/desired behavior:

• What is the expected behavior?
  When validating a property on a child object, an error message should be displayed when validation fails.

• What is the motivation / use case for changing the behavior?
  The binding system recognises properties that are objects, e.g. you can bind to model.phone1.text, and so it makes sense that you can validate against model.phone1.text. Indeed you can validate against model.phone1.text, the problem is that when there is a validation error, no error message is displayed. Further, I have other properties on the phone object, e.g. phone type, and want to keep this encapsulation, meaning that it is important that I can validate properties on child objects.

Additionally, I have logic in many different sub-objects and do not want to merge all my sub-objects into their parent object just to work around this problem - it is simply not practical or perhaps even feasible to do so.

[jdanyow]

property paths aren't supported currently- more info here: #283