title: Making invisible but required <input> in AngularJS
body: <p>The forms I need to check use some non-<code>&lt;input&gt;</code> fields but I want to make them just as <code>required</code> as text fields. So should user try to submit uncompleted information, the form won't permit it and <strong>show</strong> the offending field. I came up with this solution:</p>
  
  <pre><code>    &lt;input type="text" class="invisible-text-input" required ng-model="doc.section[0]" ng-change="resetSection();"&gt;
  </code></pre>
  
  <p>You can probably guess what <code>resetSection()</code> does. <code>doc.section[0]</code> is set by some custom means.</p>
  
  <p>CSS:</p>
  
  <pre><code>    .invisible-text-input {
        cursor: default;
        width: 0px;
        position: absolute;
        color: transparent;
        background-color: transparent;
        height: 0px;
        bottom: 0px;
      }
  </code></pre>
  
  <p>Now it's really hard to accidentally get into this field but form validation will place cursor there when user try to submit form with no data. And after this user can type something there, which is uncool despite <code>resetSection()</code>.
  So I need a way to block user input in this input while still keeping it required. <code>disabled</code> and <code>readonly</code> will make the form ignore the input so I can't just use them.</p>