Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template>
<require from="./url"></require>
<url repeat.for="url of urls" url.bind="url"></url>
</template>
import { autoinject } from "aurelia-framework";
import { ValidationController, ValidationRules, Rule, ValidationControllerFactory } from "aurelia-validation";
import { Url } from "./url";
class Foo {
urls: Url[];
title: string;
}
@autoinject
export class SomeViewModel {
foo: Foo = {
title: "hello world",
urls: [
{ protocol: 'http', host: 'here.com', port: 8080},
{ protocol: 'http', host: 'there.com', port: 80}
]
}
controller: ValidationController;
constructor(controllerFactory: ValidationControllerFactory) {
this.controller = controllerFactory.createForCurrentScope();
}
bind() {
ValidationRules
.ensure((f: Foo) => f.title).required()
.ensure(f => f.urls).required().minItems(1) // validates how many urls are required
.on(this.foo);
}
}
import { autoinject } from "aurelia-framework";
import { ValidationController, ValidationRules, Rule } from "aurelia-validation";
class Url {
protocol: string;
host: string;
port: number;
}
class Foo {
urls: Url[];
title: string;
}
@autoinject
export class SomeViewModel {
foo: Foo = {
title: "hello world",
urls: [
{ protocol: 'http', host: 'here.com', port: 8080},
{ protocol: 'http', host: 'there.com', port: 80}
]
}
urlRules: Rule<Url, any>[][];
constructor(private readonly controller: ValidationController) {
}
bind() {
ValidationRules
.ensure((f: Foo) => f.title).required()
.ensure(f => f.urls).required().minItems(1) // validates how many urls are required
.on(this.foo);
this.urlRules = ValidationRules
.ensure((u: Url) => u.protocol).required()
.ensure(u => u.host).required()
.ensure(u => u.port).required().satisfies((val, obj) => {
if (val == null) { return true; }
return val > 0;
})
.rules; // get a ruleset we can apply to objects later
this.foo.urls.forEach(url => {
this.controller.addObject(url, this.urlRules);
});
}
unbind() {
this.foo.urls.forEach(url => {
this.controller.removeObject(url);
});
}
}
<template>
<div repeat.for="url of foo.urls">
<input value.bind="url.protocol & validate">
<input value.bind="url.host & validate">
<input value.bind="url.port & validate">
</div>
</template>
<template>
<input value.bind="url.protocol & validate">
<input value.bind="url.host & validate">
<input value.bind="url.port & validate">
</template>
import { autoinject, bindable } from "aurelia-framework";
import { ValidationController, ValidationRules } from "aurelia-validation";
import { bindingMode } from "aurelia-binding";
export class Url {
protocol: string;
host: string;
port: number;
}
@autoinject
export class UrlViewModel {
@bindable({ defaultBindingMode: bindingMode.twoWay }) url: Url;
constructor(private readonly controller: ValidationController) {
}
bind() {
ValidationRules
.ensure((u: Url) => u.protocol).required()
.ensure(u => u.host).required()
.ensure(u => u.port).required().satisfies((val, obj) => {
if (val == null) { return true; }
return val > 0;
})
.on(this.url);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment