element markup

form-content.html

<template>
    <div class="form-group">
        <label for="fn">arrayObjectTest[0].name</label>
        <input type="text" value.bind="arrayObjectTest[0].name" class="form-control" id="fn" placeholder="arrayObjectTest[0].name">
    </div>
    <div class="form-group">
        <label for="ln">arrayTest[0]</label>
        <input type="text" value.bind="arrayTest[0]" class="form-control" id="ln" placeholder="arrayTest[0]">
    </div>

    <div class="form-group">
        <label for="ln">objectTest.name</label>
        <input type="text" value.bind="objectTest.name" class="form-control" id="ln" placeholder="objectTest.name">
    </div>

    <div class="form-group">
        <label for="ln">variable</label>
        <input type="text" value.bind="variable" class="form-control" id="ln" placeholder="variable">
    </div>

    <div class="form-group">
        <label>test all</label>
        <p class="help-block">${!arrayObjectTest[0].name || !arrayTest[0] || !objectTest.name ? 
            'All needs to have value': arrayObjectTest[0].name +' , '+ arrayTest[0] +' , '+ objectTest.name+', '+ variable} </p>
    </div>

    <div class="form-group">
        <label>${} test</label>
        <p><b>arrayTest[0]:</b>${arrayTest[0]} <br></p>
        <p><b>arrayObjectTest[0].name:</b>${arrayObjectTest[0].name}<br></p>
        <p><b>objectTest.name:</b>${objectTest.name}<br></p>
        <p><b>normal variable:</b>${variable}<br></p>

        <label>if-bind test</label>
        <h5 if.bind="!arrayObjectTest[0].name" class="help-block">missing arrayObjectTest[0].name</h5>
        <h5 if.bind="!arrayTest[0]" class="help-block">missing arrayTest[0]</h5>
        <h5 if.bind="!objectTest.name" class="help-block">missing objectTest.name</h5>
        <h5 if.bind="!variable" class="help-block">missing variable</h5>

    </div>

    <button type="submit" class="btn btn-default">Submit</button>
</template>

form-content.ts

import { inject, customElement, EventAggregator, logger, IComponent } from 'mf';

@logger()
@customElement('v-form-content')
@inject(EventAggregator)
export class VformContent implements IComponent {
    public variable = 'variable';
    public objectTest = {
        name: 'Im object'
    };
    public arrayTest = ['Array!'];
    public arrayObjectTest = [{ name: 'object Array!' }];


    constructor() {
        // todo
    }


    @logger
    public async loadTemplate() {
        return require('./form-content.html');
    }


    @logger
    public created(...params) {
        // todo
    }


    @logger
    public detached(...params) {
        // todo
    }


    @logger
    public attached(...params) {
        // replace them after 2 sec to test it works
        setTimeout(() => {
            this.objectTest = {
                name: 'object replaced'
            };
            this.arrayTest = ['array replaced'];
            this.arrayObjectTest = [{ name: 'object array replaced' }];
            let x = 'variable replaced';
            this.variable = x;

            // set value to mnake sure they work
            setTimeout(() => {
                this.objectTest.name = 'object set';
                this.arrayTest[0] = 'array set';
                this.arrayObjectTest[0].name = 'object array set';
                this.variable = 'variable set';

                // clear values so if.bind triggers
                setTimeout(() => {
                    this.objectTest.name = '';
                    this.arrayTest[0] = '';
                    this.arrayObjectTest[0].name = '';
                    this.variable = '';

                    // put value back again to test if.bind
                    setTimeout(() => {
                        this.objectTest.name = 'ready for input';
                        this.arrayTest[0] = 'ready for input';
                        this.arrayObjectTest[0].name = 'ready for input';
                        this.variable = 'ready for input';
                    }, 3000);

                }, 3000);

            }, 2000);

        }, 2000);
    }

    @logger
    public processContent(...params) {
        return true;
    }


    @logger
    public contentProcessed(...params) {
        // todo
    }
}