component.html

<script>
    $Component('teste', function () {
        this.onInit = function () {
            console.log('Component Initialized', this);
        }

        this.isChecked = function (e) {
            return e.isDirty || e.isTouched;
        };

        this.isEmpty = function (e) {
            return e.value.trim().length === 0;
        }

        this.formIsValid = function () {
            return this.form.isDirty && !this.isEmpty(this.name) && !this.isEmpty(this.age);
        };

        this.onClickRegister = function () {
            alert('Name: ' + this.name.value + ', Age: ' + this.age.value);
        };

        this.randomColor = function (e) {
            return ['blue', 'red', 'yellow', 'green'][Math.floor(Math.random() * 5)];
        }

        this.onlyNumber = function (e) {
            if (!(/^\d*$/.test(e.key))) {
                e.preventDefault();
            }
        }
    });
</script>
<div>
    <form #name="form">
        <div>
            <label class.has-error="isChecked(name) && isEmpty(name)">Name</label>
            <input type="text" #name="name" />
            (<label>Clone Sample</label>: <input type="text" #name="nameClone" attr.value="name.value" disabled css.color="randomColor(nameClone)" />)
        </div>
        <div if="!isEmpty(name)">
            <label>Age</label>
            <input type="text" #name="age" event.keypress="onlyNumber($event)" />
        </div>
        <br />
        <div>
            <button type="button" prop.disabled="!formIsValid()" event.click="onClickRegister()">Register</button>
            <button type="reset" event.click="ComponentFactory.checkModification(this)"
                title="Verification after click is required! If you want to understand why, remove the event.click attribute from this element.">Default
                Reset</button>
            <button type="button" event.click="form.reset()">Reset on Event</button>
        </div>

        <br />
        <div>
            <div>[Data String]</div>
            <div><label>Name</label>: <span $html="JSON.stringify(name.value)"></span></div>
            <div><label>Age</label>: <span $html="JSON.stringify(age.value)"></span></div>
            <div><label>Form is Dirty</label>: <span $html="JSON.stringify(form.isDirty) || 'false'"></span></div>
            <div><label>Form is Valid</label>: <span $html="JSON.stringify(formIsValid())"></span></div>
        </div>
    </form>
</div>