CODEWITHSUNDEEP
angularjstypescriptangular
MMR
MMR

Reputation: 3009

How to validate forms without using disable button

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>

Upvotes: 1

Views: 56

Answers (1)

null canvas
null canvas

Reputation: 10613

The easiest way is to add required attribute to your input

Upvotes: 1

Related Questions