2015-07-30 3 views
3

Я пытаюсь использовать компонент многократного текстового поля, который использует проверку валидации aurelia. В этом случае мне нужно связать атрибут validate с его относительным именем. Это мое мнение, что с помощью компонента:Проверка для пользовательского компонента в Aurelia

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

вид модели:

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() { 
} 

} 

текст поля зрения пользовательского элемента:

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

вид-модель:

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 = ''; 
} 

Он работает таким образом, но мне нужно, чтобы связать проверки его собственного имени, так что я попробовал эти способы:

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

, а также синтаксис строки интерполяции:

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

, но они этого не делают Работа. Кажется, что только прямая строка принята, какая из них находится в представлении пользовательского элемента текстового поля. Как я могу установить атрибут validate для каждого компонента однозначно?

ответ

0

Я думаю, что у вас есть сочетание проблем здесь, так это сделать и посмотреть, как вы идете:

1) Подтвердить виртуальная машина

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

2 верхнего уровня) Сообщить рамки проверки, где те, валидация приходят из: ("* модель" в валидации = части, вероятно, нет необходимости, но не должно быть больно, либо)

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

3) вмещающие пользовательские элементы в форме-группы «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> 
+1

Спасибо за ваше предложение. Я пытался, но все равно не работает. Кажется, что атрибут «validate» не может быть связующим. В этом случае мы можем использовать пользовательскую проверку JQuery. – starkmkl

+0

Я вложил некоторые вещи в этот ответ - если мы настраиваем 'this.validation = ...', тогда нам нужно привязать его. 'validate.bind =" validation "' Теперь я отредактирую ответ, чтобы быть правильной версией. –

+0

Я связал его в компоненте. Это тоже не работает. Я собираюсь закрыть этот вопрос. благодаря – starkmkl