title: Validation for custom component in Aurelia
body: <p>I am trying to have a reusable text box component which using aurelia-validation for validation issue. In this case I need to bind my validate attribute with its relative name. This is my view that is using component:</p>
  
  <pre><code>&lt;form role="form" validate.bind="model.validation"&gt;
            &lt;text-field name="firstName" value.two-way="model.firstName" label="First Name :" placeholder="Enter first name"&gt;&lt;/text-field&gt;
            &lt;text-field name="lastName" value.two-way="model.lastName" label="Last Name :" placeholder="Enter last name"&gt;&lt;/text-field&gt;
  </code></pre>
  
  <p></p>
  
  <p>view model:</p>
  
  <pre><code>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 () {
  }
  
  }
  </code></pre>
  
  <p>text-field custom element view:</p>
  
  <pre><code>&lt;div class="editor-field"&gt;
          &lt;input type="text" value.two-way="value" class="k-textbox" id.one-way="name" placeholder.bind="placeholder" readonly.one-way="readonly" validate="firstName"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>view-model:</p>
  
  <pre><code>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 = '';
  }
  </code></pre>
  
  <p>It works in this way but I need to bind validate to its proper name so I have tried these ways:</p>
  
  <pre><code>`&lt;input type="text" value.two-way="value" class="k-textbox" id.one-way="name" placeholder.bind="placeholder" readonly.one-way="readonly" validate.bind="name"&gt;`
  </code></pre>
  
  <p>and also string interpolation syntax:</p>
  
  <pre><code>&lt;input type="text" value.two-way="value" class="k-textbox" id.one-way="name" placeholder.bind="placeholder" readonly.one-way="readonly" validate="${name}"&gt;
  </code></pre>
  
  <p>but they don't work. It seems just a direct string is accepted, which one is in the text-field custom element view. How could I set validate attribute for each component uniquely? </p>