Best way to create a reusable Aurelia widget that encapsulates both the label and the edit field

Question

I'm trying to create a simple Aurelia reusable widget that encapsulates both a label and a text input field. The idea is to create a library of these reusable UI widgets to make it easier to compose screens and forms - perhaps taking some learnings from "Angular Formly".

text-field.html template:

<template>
    <div class="form-group">
        <label for.bind="name">${label}</label>
        <input type="text" value.two-way="value" class="form-control" id.one-way="name" placeholder.bind="placeHolder">
    </div>
</template>

text-field.js view model:

import {bindable} from 'aurelia-framework';

export class TextField {
  @bindable name = '';
  @bindable value = '';
  @bindable label = '';
  @bindable placeHolder = '';
}

client.html template snippet (showing usage of text-field):

<text-field name="firstName" value.two-way="model.firstName" label="First Name" placeHolder="Enter first name"></text-field>
<text-field name="lastName" value.two-way="model.lastName" label="Last Name" placeHolder="Enter last name"></text-field>

client.js view model (showing usage of text-field):

class ClientModel {
  firstName = 'Johnny';
  lastName = null;
}

export class Client{
  heading = 'Edit Client';
  model = new ClientModel();

  submit(){
    alert(`Welcome, ${this.model.firstName}!`);
  }
}

QUESTION: When the final HTML is generated, the attributes are "doubled up" by for example having both the id.one-way="name" AND id="firstName" (see below) - why is this and is there a better way to do this entire reusable text field control?:

<input type="text" value.two-way="value" class="form-control au-target" id.one-way="name" placeholder.bind="placeHolder" id="firstName" placeholder="">

Answer 1

That's normal. Same as if you do style.bind="expression" on a div and expression has display:block. You will end up with <div style.bind="expression" style="display:block"/>. The browser ignores style.bind because it is not a known html attribute. You can just ignore the Aurelia one.