How to validate forms without using disable button

Question

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.

<div class="loginformcss nopadding">
     <form id="login-form" name="login-form" class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)">
       <div class="col_full"> 
         <input type="text" [formControl]="form.controls['firstname']" id="login-form-firstnamee" name="login-form-firstname" value="" placeholder="First Name" class="form-control not-dark">
         <span *ngIf="form.controls['firstname'].touched">
           <span *ngIf="!form.controls['firstname'].valid" >
              <p class="error">Field required</p>
           </span>  
         </span>
       </div> 

       <div class="clear"></div>
       <div class="col_full">
           <input type="text" [formControl]="form.controls['lastname']" id="login-form-password" name="login-form-password" value="" placeholder="Last Name" class="form-control not-dark">
           <span *ngIf="form.controls['lastname'].touched" >
               <span *ngIf="!form.controls['lastname'].valid" >
                   <p class="error">Field required</p>
                </span>
           </span>
       </div>

       <div class="clear"></div>
       <div class="col_full">
            <input type="text" [formControl]="form.controls['profilename']" id="login-form-username" name="login-form-username" value="" placeholder="User Name" class="form-control not-dark">                      
            <span *ngIf="form.controls['profilename'].touched" >
                 <span *ngIf="!form.controls['profilename'].valid" >
                       <p class="error">Field required</p>
                 </span>
            </span>
        </div>
        <div class="clear"></div>
        <div class="col_full nobottommargin">
           <button class="col-xs-12 button button-small button-3d  nomargin" id="login-form-submit" name="login-form-submit" value="login" >Login</button>
         </div>
          <div class="clear"></div>

null canvas · Accepted Answer · 2016-07-30 08:08:14Z

1

The easiest way is to add required attribute to your input

answered Jul 30, 2016 at 8:08

null canvas

10.7k2 gold badges17 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MMR Over a year ago

When i do that for all of my colums,it showed only for first column

Collectives™ on Stack Overflow

How to validate forms without using disable button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related