binding model property to custom element input - aurelia

Question

I'm trying to bind a custom element input data to a parent model property:
The this.fieldValue of the custom element should be eventually binded to the registration.firstName property of the container\parent page.
See related code:
This is the custom element HTML:
<template>
<label>
${title}<input name.bind="fieldName" custom-type="text"
title.bind="title" focusout.trigger="focusoutAction()" />
</label>
</template>
This is the view model (simplified):
import {inject, bindable, customElement, bindingMode} from
'aurelia-framework';
#customElement('form-input')
#inject(Element)
export class FormInputCustomElement {
#bindable({ defaultBindingMode: bindingMode.twoWay }) value;
#bindable title;
#bindable customType;
#bindable placeHolder;
#bindable fieldName;
#bindable onFocusout;
constructor(element) {
this.element = element;
this.input = null;
this.fieldValue = '';
}
bind(bindingContext) {
this.input = this.element.getElementsByTagName("input")[0];
this.input.type = this.customType || "text";
this.input.placeholder = this.placeHolder || "";
}
focusoutAction() {
this.fieldValue = this.input.value;
this.onFocusout();
}
}
In the custom element I can see that the this.fieldValue get the input text.
This is the container relevant code:
<template>
<require from="./../../formControllers/formInput"></require>
<div>
${fieldValue}<form-input name="firstName" id="firstName" field-
value.bind="registration.firstName" title="First Name"
validate="registration.firstName" place-holder="Enter first name" field-
name="firstName" on-focusout.call="validateInput()" />
</div>
<button type="button" click.delegate="createNewAccount()">Create New
Account</button>
And this is the class relevant code:
import { inject, bindable } from 'aurelia-framework';
export class AccountRegistration {
constructor() {
this.initRegistration();
}
initRegistration() {
this.registration = {};
this.registration.firstName = '';
}
createNewAccount() {
var a = this.registration.firstName;
}
The problem is that when I reach the createNewAccount function, the
this.registration.firstName is empty although it is binded to the custom element
field-value (fieldValue in camelCase) property, which is set to the input text of the custom element.
What am I doing wrong here ?

Answer 1

I think The problem is
#bindable({ defaultBindingMode: bindingMode.twoWay }) value;
This should be #bindable({ defaultBindingMode: bindingMode.twoWay }) fieldValue;
Also in your template <input value.bind="fieldValue" />
Now when you bind registration.firstname to field-value in your form it will be bound to the value on the input.