title: How to use Kendo UI validator to validate inputs within an AngularJS component inside of a form
body: <p>Suppose that I have an AngularJS component that renders inputs for a user to input their first and last name like so:</p>
  
  <pre><code>First name: &lt;input ng-model="ctrl.firstName" required /&gt;&lt;br /&gt;
  Last name: &lt;input ng-model="ctrl.lastName" required /&gt;
  </code></pre>
  
  <p>Suppose that the component is called "Name Input", and I use it as part of another form like so:</p>
  
  <pre><code>&lt;form kendo-validator="ctrl.validator"&gt;
      &lt;name-input&gt;&lt;/name-input&gt;&lt;br /&gt;
      Quest: &lt;input ng-model="ctrl.quest" required /&gt;&lt;br /&gt;
      Favorite Color: &lt;input ng-model="ctrl.favoriteColor" required
  &lt;/form&gt;
  </code></pre>
  
  <p>The result is a form with four inputs: First Name, Last Name, Quest, and Favorite Color.</p>
  
  <p>However, when I invoke <code>validator.validate</code>, I see that only Quest and Favorite Color get validated.  I've tried to declare a Kendo UI validator for the Name Input component, but it doesn't work.  At runtime, the validator declared inside the Name Input component is undefined.</p>
  
  <p>The only solution I've come across that seems reasonable is to use <code>validator.validateInput</code> on each input, as described here: <a href="https://www.newventuresoftware.com/blog/code-bites-validate-any-dom-element-with-kendoui-validator" rel="nofollow noreferrer">https://www.newventuresoftware.com/blog/code-bites-validate-any-dom-element-with-kendoui-validator</a></p>
  
  <p>In this case, I think I would have to invoke <code>validator.validate</code> to validate Quest and Favorite Color, but I would have to invoke <code>validator.validateInput</code> twice for the two inputs inside the Name Input component.</p>
  
  <p>This seems like it could work, but it's very un-DRY.  The problem is that if I use <code>validator.validateInput</code> in ten different forms that use this Name Input component, and then in the future, I add a "Middle Name" input to the Name Input, then I must go back and add an additional <code>validator.validateInput</code> invocation everywhere I've used the Name Input component.</p>
  
  <p>What is a better way to dot his?</p>