complex-array-validation.html

<template>
    <require from="./url"></require>
    <url repeat.for="url of urls" url.bind="url"></url>
</template>

complex-array-validation.ts

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);
    }
}

sample-array-validation.ts

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);
        });
    }
}

simple-array-validation.html

<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>

url.html

<template>
    <input value.bind="url.protocol & validate">
    <input value.bind="url.host & validate">
    <input value.bind="url.port & validate">
</template>

url.ts

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);
    }
}