проверка не работает для дивы, изначально скрытой

Question

У меня есть следующий:

приветственного-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> 

приветственных-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; 
} 
} 

Любые divs, имеющие if.bind = "showSub", сначала скрыты, так как showSub изначально устанавливается в false. Некоторые из этих скрытых полей имеют к ним подтверждение, например. входной элемент emailAddr имеет атрибуты isNotEmpty() и isEmail(), прикрепленные к нему. Проблема в том, что валидация не работает с скрытыми полями, когда они отображаются, другими словами, когда я нажимаю кнопку «Дополнительно», элементы появляются, но сообщения проверки не срабатывают, когда поля недействительны.

Я попытался удалить if из одного или двух из div, и правило проверки действует как обычно, когда это произойдет; в поле «Электронная почта» будет отображаться «недействительный адрес электронной почты» при удалении if и внесен неверный формат адреса электронной почты. Я знаю, что проверка работает, потому что когда я отправляю, я получаю сообщение об ошибке в консоли. Есть что-то, что мне не хватает?

Answer 1

Ответ заключается в использовании if.bind. Я поменял if.bind на show.bind (Так как это то, что я действительно пытался сделать), и теперь правила проверки правильны как ожидалось