验证不适用于最初隐藏的 div

Question

我有以下几点：

welcome-form.html

<template>
<form  submit.delegate="submit()" role="form" class="form-horizontal" validate.bind="validation">
    <div class="form-group">    
        <label class="control-label col-sm-2" for="firstName">First Name:</label>
        <div class="col-sm-10">
                <input id="firstName" type="text" value.bind="firstName" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="lastName">Last Name:</label>
        <div class="col-sm-10">
            <input id="lastName" type="text" value.bind="lastName" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2">Full Name:</label>
        <div class="col-sm-10">
            <p>${fullName}</p>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Submit</button>
            <button click.delegate="toggleSubform()" class="btn btn-default">Advanced</button>
        </div>
    </div>
    <hr class="half-rule">
    <form role="form" class="form-horizontal"
    validate.bind="validation">
    <div class="form-group">
        <label class="control-label col-sm-2" for="email"
        >Email:</label>
        <div class="col-sm-10">
            <input id="emailAddr"class="form-control"
            value.bind="emailAddr">
            <span class="help-block">
                E.g. example@gmail.com
            </span>
        </div>
    </div>
    <div  if.bind="showSub" class="form-group">
        <label class="control-label col-sm-2" for="phone">Phone:</label>
        <div class="col-sm-3">
            <input id="phone" type="tel"
class="form-control" value.bind="phone">
        </div>
        <label class="control-label col-sm-2" for="mobile">Mobile:</label>
        <div class="col-sm-3">
            <input id="mobile" type="tel" class="form-control">
        </div>
    </div>
    <div if.bind="showSub" class="form-group">
        <label class="control-label col-sm-2">Age Group:</label>
        <div class="radio">
            <label><input type="radio" name="age1">18 - 30</label>
        </div>
        <div class="radio col-sm-offset-2">
            <label><input type="radio" name="age1">31-64</label>
        </div>
        <div class="radio col-sm-offset-2">
            <label><input type="radio" name="age1">65+</label>
        </div>
    </div>
    </form>
</form>
</template>

welcome-form.js

import {Validation} from 'aurelia-validation';
export class WelcomeForm{
static inject() { return [Validation]; }
constructor(validation){
this.firstName ='John';
this.lastName='Doe';
this.emailAddr='';
this.phone='(XXX)XXX-XXXX'
this.showSub = false;

this.validation = validation.on(this)
    .ensure('firstName')
    .isNotEmpty()
    .hasMinLength(3)
    .hasMaxLength(10)
    .containsOnlyAlpha()
    .ensure('lastName')
    .isNotEmpty()
    .hasMinLength(3)
    .hasMaxLength(10)
    .ensure('emailAddr')
    .isNotEmpty()
    .isEmail()
.ensure('phone')
    .isNotEmpty()
    .containsOnlyDigits();
}

get fullName(){
    return `${this.firstName} ${this.lastName}`;
}

submit(){
    this.validation.validate()
        .then( () => {
            alert(`Welcome, ${this.fullName}`);
        });
    }

toggleSubform(){
    this.showSub = !this.showSub;
}
}

任何具有 if.bind="showSub" 的 div 最初都是隐藏的，因为 showSub 最初设置为 false。其中一些隐藏字段附加了验证，例如emailAddr 输入元素附加了 isNotEmpty() 和 isEmail() 验证规则。问题是，在显示隐藏字段时验证不起作用，换句话说，当我单击高级按钮时，元素会出现，但是当字段无效时验证消息不会触发。

我已经尝试从一个或两个 div 中删除 if 并且在发生这种情况时验证规则会正常运行；当删除 if 并输入无效的电子邮件地址格式时，电子邮件字段将显示“不是有效的电子邮件地址”。我知道验证正在工作，因为当我提交时，控制台中出现错误。我有什么遗漏吗？

Answer 1

答案取决于 if.bind 的使用。我将 if.bind 换成了 show.bind（因为那是我真正想要做的），验证规则现在按预期触发