Validation for a custom component in Aurelia

I am trying to use a reusable textbox component that uses aurelia validation to validate. In this case, I need to bind the validate attribute to its relative name. This is my opinion the component is using:

<form role="form" validate.bind="model.validation">
          <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>

      

        
        
        
      

    

view model:

import {Validation} from 'aurelia-validation';
import {ClientModel} from '../models/client-model';

export class Registrations{ 

 static inject() { return [Validation]; }

  constructor(validation) {
    this.heading = 'Registrations';
    this.model=new ClientModel('John','Neo','2');
    this.readonly = 'readonly';

    this.model.validation = validation.on(this.model)
    .ensure('firstName')
    .isNotEmpty()
    .hasMinLength(3)
    .hasMaxLength(10)
    .ensure('lastName')
    .isNotEmpty()
    .hasMinLength(5)
    .hasMaxLength(10) ;

  }
activate () {
}

}

      

        
        
        
      

    

text element:

<div class="editor-field">
        <input type="text" value.two-way="value" class="k-textbox" id.one-way="name" placeholder.bind="placeholder" readonly.one-way="readonly" validate="firstName">
    </div>

      

        
        
        
      

    

Model view:

import {bindable} from 'aurelia-framework';

export class TextField {
    @bindable name = '';
    @bindable value = null;
    @bindable id = '';
    @bindable label = '';
    @bindable placeholder = '';
    @bindable readonly = false;
    @bindable hasValidationError = false;
    @bindable validationMessage = '';
}

      

        
        
        
      

    

It works this way, but I need to associate validate with its own name, so I tried the following ways:

`<input type="text" value.two-way="value" class="k-textbox" id.one-way="name" placeholder.bind="placeholder" readonly.one-way="readonly" validate.bind="name">`

      

        
        
        
      

    

and also the syntax for string interpolation:

<input type="text" value.two-way="value" class="k-textbox" id.one-way="name" placeholder.bind="placeholder" readonly.one-way="readonly" validate="${name}">

      

        
        
        
      

    

but they don't work. Only straight line seems to be accepted which one is in the custom element view of the textbox. How can I set the validate attribute for each component uniquely?