Aurelia:具有可重复使用的validateable自定义元素的验证表单 [英] Aurelia: validating form with reusable validatable custom element

问题描述

简短的问题:当验证是子自定义元素的一部分时，如何验证父表单?

Short question: How can I validate a parent form when the validation is part of child custom elements?

长版:

我构建了一个可重用的自定义元素，其中包括验证，该验证的工作方式与我期望的一样:

I built a reusable custom element which includes validation which is working like I expect it to do:

validated-input.html:

validated-input.html:

<template>
<div class="form-group" validate.bind="validation">
    <label></label>
    <input type="text" value.bind="wert" class="form-control" />
</div>
</template>

validated-input.js:

validated-input.js:

import { bindable, inject } from 'aurelia-framework';
import { Validation } from 'aurelia-validation';

@inject(Validation)
export class ValidatedInputCustomElement {
    @bindable wert;

    constructor(validation) {
        this.validation = validation.on(this)
        .ensure('wert')
            .isNotEmpty()
            .isGreaterThan(0);
    }
} 

我将有一些表单在同一视图中多次使用此自定义元素(最多8或12次，甚至更多).一个非常简化的示例可能看起来像这样:

I will have some forms that will use this custom element more than once in the same view (can be up to 8 or 12 times or even more). A very simplified example could look like this:

<template>
  <require from="validated-input"></require>
  <form submit.delegate="submit()">
    <validated-input wert.two-way="val1"></validated-input>
    <validated-input wert.two-way="val2"></validated-input>
    <validated-input wert.two-way="val3"></validated-input>
    <button type="submit" class="btn btn-default">save</button>
  </form>
</template>

在相应的viewmodel文件中，我想确保只有在所有内容都有效的情况下才可以提交数据.我想做

In the corresponding viewmodel file I would like to ensure that the data can only be submitted if everything is valid. I would like to do something like

this.validation.validate()
    .then(() => ...)
    .catch(() => ...);

但是我还不知道如何(或是否)可以将整体验证放入父视图.

but I don't understand yet how (or if) I can pull the overall validation into the parent view.

我到目前为止想出的是这样引用我的经过验证的输入的视图模型:

What I came up with up to now is referencing the viewmodel of my validated-input like this:

<validated-input wert.two-way="val1" view-model.ref="vi1"></validated-input>

，然后像这样在父级中对其进行检查:

and then to check it in the parent like this:

this.vi1.validation.validate()
    .then(() => ...)
    .catch(() => ...);

但这会使我需要称呼它8/12/...次.

but this would make me need to call it 8/12/... times.

我可能还会在表单中包含一些其他验证.

And I will probably have some additional validation included in the form.

这是一个有例子的小矮人: https://plnkr.co/edit/v3h47GAJw62mlhz8DeLf?p=info

Here is a plunkr with an example: https://plnkr.co/edit/v3h47GAJw62mlhz8DeLf?p=info

推荐答案

您可以在表单级别定义一个验证对象数组(如Fabio Luz所写)，然后在该数组中注册自定义元素验证.验证将从表单提交开始.

You can define an array of validation objects (as Fabio Luz wrote) at the form level and then register the custom element validations in this array. The validation will be started on the form submit.

表单代码如下:

validationArray = [];

validate() {
    var validationResultsArray = [];

    // start the validation here
    this.validationArray.forEach(v => validationResultsArray.push(v.validate()));

    Promise.all(validationResultsArray)
        .then(() => this.resulttext = "validated")
        .catch(() => this.resulttext = "not validated");
}

validated-input.js获得了一个用于注册验证的新功能

validated-input.js gets a new function to register the validation

bind(context) {
    context.validationArray.push(this.validation);
}

此处的示例是 https://plnkr.co/edit/X5IpbwCBwDeNxxpn55GZ?p=preview

这篇关于Aurelia:具有可重复使用的validateable自定义元素的验证表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！