I’ve struggled a little with this today. I’m used to knockout validation, and I wanted to make a start using Breeze validation to compare two date fields bound using knockout.
This is what I wanted to achieve:
Here’s a reminder on how to make this work:
I’m basing my app on the nuget package “ProvenStyle.Durandal.StarterKit” v 0.0.7. This is pretty much brand new at the time of writing and I’ve found it to be a great starting point, together with these Breeze packages:
<package id="bootstrap" version="3.0.3" targetFramework="net451" />
<package id="Breeze.Client" version="1.4.11" targetFramework="net451" />
<package id="Breeze.Server.ContextProvider" version="1.4.11" targetFramework="net451" />
<package id="Breeze.Server.ContextProvider.EF6" version="1.4.11" targetFramework="net451" />
<package id="Breeze.Server.WebApi2" version="1.4.11" targetFramework="net451" />
<package id="Breeze.WebApi2.EF6" version="1.4.11" targetFramework="net451" />
As per the great John Papa’s advice in his 2013 course “Single Page Apps Jumpstart” on Pluralsight, I created a datacontext to handle things like the configuration of the Breeze EntityManager. In this code snippet from the datacontext module, I get the metadata and then call a function “initializeCustomValidators” which I’ve called from a module called “model”, ( again recommended by John P).
var primeData = function () {
return manager.fetchMetadata()
.then(function (data) {
utils.getOptionSets(data.schema.enumType, optionSets);
model.initializeCustomValidators(manager);
Q.resolve();
}).fail(function (error) {
Q.reject(error);
});
};
The initializeCustomValidators function is just configuring one validator here for “end Date” (“end”). This works at the entity level and supplies a validator object with details of the “end” property:
function initializeCustomValidators(manager) {
// returns an endDateValidator with its parameters filled
var endDateValidator = new breeze.Validator(
"endDateValidator", // validator name
endDateValidationFn, // validation function
{ // validator context
messageTemplate: "'start and end date' must be present, start must be less or equal to end",
property: manager.metadataStore.getEntityType("ClientLicense").getProperty("end"),
propertyName: "end"
});
function endDateValidationFn(entity, context) {
var end = entity.getProperty("end");
var start = entity.getProperty("start");
if (end === undefined || start === undefined) {
return false;
}
return start <= end;
};
var clientLicenseType = manager.metadataStore.getEntityType("ClientLicense");
clientLicenseType.validators.push(endDateValidator);
};
It’s worth stepping through the “getValidationErrors in breeze.debug.js to see how this works, this helped me populate the validator correctly ( specifically looking at how the filter works, see below, this helped to supply the correct parameter for property, above).
proto.getValidationErrors = function (property) {
assertParam(property, "property").isOptional().isEntityProperty().or().isString().check();
var result = __getOwnPropertyValues(this._validationErrors);
if (property) {
var propertyName = typeof (property) === 'string' ? property : property.name;
result = result.filter(function (ve) {
return ve.property && (ve.property.name === propertyName || (propertyName.indexOf(".") != -1 && ve.propertyName == propertyName));
});
}
return result;
};
This suggests one way to listen for changes to the Breeze validation errors connection and update a ko observable to which I can bind. Very handy. I call this in the EntityType post-construction initializer as suggested by Ward:
function addhasValidationErrorsProperty(entity) {
var prop = ko.observable(false);
var onChange = function () {
var hasError = entity.entityAspect.getValidationErrors().length > 0;
if (prop() === hasError) {
// collection changed even though entity net error state is unchanged
prop.valueHasMutated(); // force notification
} else {
prop(hasError); // change the value and notify
}
};
onChange(); // check now ...
entity.entityAspect // ... and when errors collection changes
.validationErrorsChanged.subscribe(onChange);
// observable property is wired up; now add it to the entity
entity.hasValidationErrors = prop;
}
I call it like this from my model class:
function clientLicenseInitializer(clientLicense) {
addhasValidationErrorsProperty(clientLicense);
clientLicense.name = ko.computed(function() {
var orgName = clientLicense.crmOrganisationName() ?clientLicense.crmOrganisationName():'--';
var type = clientLicense.licenseType() ? clientLicense.licenseType():'--';
var hostingModel = clientLicense.hostingModel() ? clientLicense.hostingModel():'--';
return orgName + ', ' + type + ', ' + hostingModel;
});
}
data binding is done as suggested in Ward’s post:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Start Date</label>
<input data-bind='datepicker:start' class="form-control">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">End Date</label>
<input data-bind="datepicker:end" class="form-control">
<div data-bind="if: hasValidationErrors">
<pre data-bind="text: entityAspect.getValidationErrors('end')[0].errorMessage "></pre>
</div>
</div>
</div>
</div>
Sprint Finish 