Working With Forms In Aurelia

When it comes to a modern web application, there is a high chance you will be working with a form or three. Fortunately Aurelia gives us straightforward and flexible ways of working with form elements and data.

Below are some common scenarios in which you might find yourself working with forms in Aurelia. All relatively straightforward, using concepts you are probably already familiar with from other frameworks like Angular.

Checkboxes

I have seen a little bit of confusion when it comes to working with checkbox elements in Aurelia. Once you understand what each role the binding behaviours play, you realise it is all quite straight forward.

Checkboxes: Using Strings

export class SomeViewModel {
    selectedOptions = [];

    someOptions = ['Option 1', 'Option 2', 'Option 3'];
}

<template>
    <form role="form">
        <label repeat.for="option of someOptions">
            <input type="checkbox" value.bind="option.value" checked.bind="$parent.selectedOptions">${option.name}
        </label>
    </form>
</template>

Checkboxes: Using Objects

export class SomeViewModel {
    selectedOptions = [];

    someOptions = [
        {value: 1, name: 'Test 1'},
        {value: 2, name: 'Test 2'},
        {value: 3, name: 'Test 3'}
    ];
}

<template>
    <form role="form">
        <label repeat.for="option of someOptions">
            <input type="checkbox" model.bind="option" checked.bind="$parent.selectedOptions">${option.name}
        </label>
    </form>
</template>

Radio Elements

There is very little difference between checkbox and radio elements. You can have multiple checkbox elements selected, a group of radio elements only allows one option to be selected (unchecking any other selections).

Radio Elements: Using Strings

This is common use-case for working with radio elements.

export class SomeViewModel {
    selectedOption = '';

    someOptions = ['Option 1', 'Option 2', 'Option 3'];
}

<template>
    <form role="form">
        <label repeat.for="option of someOptions">
            <input type="radio" value.bind="option" name="testOptions" checked.bind="$parent.selectedOption">${option}
        </label>
    </form>
</template>

Radio Elements: Using Objects

Once again, not too different to working with strings. We are binding to an object which might have many properties/values instead of a singular string.

export class SomeViewModel {
    selectedOptions = [];

    someOptions = [
        {value: 1, name: 'Test 1'},
        {value: 2, name: 'Test 2'},
        {value: 3, name: 'Test 3'}
    ];
}

<template>
    <form role="form">
        <label repeat.for="option of someOptions">
            <input type="radio" model.bind="option" name="testOptions" checked.bind="$parent.selectedOptions">${option.name}
        </label>
    </form>
</template>

Select Elements

Working with select dropdown elements is a piece of cake. You can bind a select to a single value or you can also bind a select to an array of values as well.

Single Select Elements

In our below example, we are using the model.bind functionality to bind to an object inside of an array. You can also work with strings by using the value.bind behaviour, but model.bind is a whole lot more flexible.

Single Select Elements: Using Strings

The most typical use-case scenario is you will find yourself populating a select elements option value with that of a value inside of a loop. If you’re looping over a simple array of colours or names, value.bind is what you want to use.

export class SomeViewModel {
    selectedVal = 3;

    someOptions = ['Option 1', 'Option 2', 'Option 3'];
}

<template>
    <form role="form">
        <select value.bind="selectedVal">
            <option repeat.for="option of someOptions" value.bind="option">${option}</option>
        </select>
    </form>
</template>

Single Select Elements: Using Objects

Unlike the above example, if you find yourself working with object values (a user object or some kind of object with many properties) you will find yourself seeking solace in the use of model.bind where we can specify an object instead of a singular value.

Once again, not much of a difference from above, we are just working with an object value instead of a string.

export class SomeViewModel {
    selectedVal = 3;

    someOptions = [
        {value: 1, name: 'Test 1'},
        {value: 2, name: 'Test 2'},
        {value: 3, name: 'Test 3'}
    ];
}

<template>
    <form role="form">
        <select value.bind="selectedVal">
            <option repeat.for="option of someOptions" model.bind="option">${option.name}</option>
        </select>
    </form>
</template>

Multiple Select Elements

Working with a simple select dropdown is great and all, but how about a multiselect? Turns out things are not that different.

The only difference between the below code and the above single select code is the fact we are using the multiple attribute on our select and we are also supply an array to the value.bind behaviour of the select, opposed to a single value seen above.

export class SomeViewModel {
    selectedValues = [];

    someOptions = [
        {value: 1, name: 'Test 1'},
        {value: 2, name: 'Test 2'},
        {value: 3, name: 'Test 3'}
    ];
}

<template>
    <form role="form">
        <select value.bind="selectedValues" multiple>
            <option repeat.for="option of someOptions" model.bind="option">${option.name}</option>
        </select>
    </form>
</template>

Textarea

A textarea element is just like any other form element. It allows you to bind to its value and by default value.bind will be two-way binding (meaning changes flow from out of the View into the ViewModel and changes in the ViewModel flow back to the View).

export class SomeViewModel {
    textAreaValue = '';
}

<template>
    <form role="form">
        <textarea value.bind="textAreaValue"></textarea>
    </form>
</template>

Contenteditable

Not exactly something that is directly associated with forms, but the contenteditable attribute can turn a DIV into a textarea like element. As such, I think it is a fair call to make that a innerhtml element is a form element.

By default like other form elements, a contenteditable element using the bind behaviour is two way (meaning changes flow in both directions like a textarea element).

export class SomeViewModel {
    textContentValue = '';
}

<template>
    <form role="form">
        <div textcontent.bind="textContentValue" contenteditable="true"></div>
    </form>
</template>

Conclusion

Whoa. That was a lot of code. We only kind of skimmed over a few aspects of working with forms. As always, the documentation explains many of these things which can be read here. Once you know the different use-cases, working with forms becomes the easiest part of your application.

If something was not clear enough, you run into any issues or have a question about forms that is not covered here: please leave a comment and I will be happy to help you out.