binding model property to custom element input

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 ?

akshay daxini · Accepted Answer · 2017-09-19 07:52:16Z

0

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.

answered Sep 19, 2017 at 7:52

akshay daxini

11 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

binding model property to custom element input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related