title: Client-side validation in angularjs
body: <p>I'm learning AngularJS and I've got a problem with validating form inputs on client-side. I've got a REST API in <code>Yii2</code> and a registration form validates on server side. I would like to add some client-side validation also. Here is the code for one input (for other is pretty much the same):</p>
  
  <pre><code>&lt;form ng-submit="register()" name="registerForm" id="register-form" method="post" role="form" novalidate&gt;
      &lt;div ng-class="{ 'has-success': (!error['login'] &amp;&amp; submitted) || (registerForm.login.$touched &amp;&amp; registerForm.login.$valid),
      'has-error': (error['login'] &amp;&amp; submitted) || (registerForm.login.$touched &amp;&amp; registerForm.login.$invalid) }"
       class="form-group"&gt;
       &lt;label class="control-label" for="login"&gt;Username&lt;/label&gt;
       &lt;input ng-model="registrationForm.login" type="text" id="login" class="form-control" name="login" required&gt;
       &lt;p class="help-block help-block-error"&gt;{{ error['login'] }}&lt;/p&gt;
       &lt;p class="help-block" ng-show="registerForm.login.$invalid &amp;&amp; registerForm.login.$touched"&gt;This field is required.&lt;/p&gt;
  &lt;/div&gt;
  ... (other inputs)
  &lt;/form&gt;
  </code></pre>
  
  <p>Some explanation: has-success should be set if input is valid - first bracket is for server side validation, second is for client side.
  - first help-block is displaying server-side validation error
  - second help-block is displaying client side validation error</p>
  
  <p><strong>The issue:</strong>
  Errors on client-side validation don't display. Also, the whole div class is not setting up.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>EDIT:
  Added form which is wrapping inputs.</p>