Validation for custom component in Aurelia

Question

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:

<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-field custom element view:

<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>

view-model:

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 in this way but I need to bind validate to its proper name so I have tried these 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 string interpolation syntax:

<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. 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?

Answer 1

I think you have a combination of problems here, so do this and see how you go:

1) Validate your top-level vm

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

2) Tell the validation framework where those validations are coming from:

<form role="form" validate.bind="validation">
   <text-field validate="model.firstName" ...></text-field>
   <text-field validate="model.lastName" ...></text-field>

(the validate="model.*" parts are probably unnecessary, but shouldn't hurt, either)

3) enclose your custom elements in form-group 's:

<form role="form" validate.bind="model.validation">
   <div class="form-group">
      <text-field validate="model.firstName" ...></text-field>
   </div>
   <div class="form-group">
      <text-field validate="model.lastName" ...></text-field>
   </div>