title: How to validate forms without using disable button
body: <p>I am  trying to validat my form  and i done it but the problem is when i click the button without entering any input value it is getting saved and i dont want to disable the button.I need a condition that if i click on submit it should show the fields error that are empty.Can anyone please suggest help.</p>
  
  <pre><code>&lt;div class="loginformcss nopadding"&gt;
       &lt;form id="login-form" name="login-form" class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)"&gt;
         &lt;div class="col_full"&gt; 
           &lt;input type="text" [formControl]="form.controls['firstname']" id="login-form-firstnamee" name="login-form-firstname" value="" placeholder="First Name" class="form-control not-dark"&gt;
           &lt;span *ngIf="form.controls['firstname'].touched"&gt;
             &lt;span *ngIf="!form.controls['firstname'].valid" &gt;
                &lt;p class="error"&gt;Field required&lt;/p&gt;
             &lt;/span&gt;  
           &lt;/span&gt;
         &lt;/div&gt; 
  
         &lt;div class="clear"&gt;&lt;/div&gt;
         &lt;div class="col_full"&gt;
             &lt;input type="text" [formControl]="form.controls['lastname']" id="login-form-password" name="login-form-password" value="" placeholder="Last Name" class="form-control not-dark"&gt;
             &lt;span *ngIf="form.controls['lastname'].touched" &gt;
                 &lt;span *ngIf="!form.controls['lastname'].valid" &gt;
                     &lt;p class="error"&gt;Field required&lt;/p&gt;
                  &lt;/span&gt;
             &lt;/span&gt;
         &lt;/div&gt;
  
         &lt;div class="clear"&gt;&lt;/div&gt;
         &lt;div class="col_full"&gt;
              &lt;input type="text" [formControl]="form.controls['profilename']" id="login-form-username" name="login-form-username" value="" placeholder="User Name" class="form-control not-dark"&gt;                      
              &lt;span *ngIf="form.controls['profilename'].touched" &gt;
                   &lt;span *ngIf="!form.controls['profilename'].valid" &gt;
                         &lt;p class="error"&gt;Field required&lt;/p&gt;
                   &lt;/span&gt;
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;div class="col_full nobottommargin"&gt;
             &lt;button class="col-xs-12 button button-small button-3d  nomargin" id="login-form-submit" name="login-form-submit" value="login" &gt;Login&lt;/button&gt;
           &lt;/div&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>