CODEWITHSUNDEEP
angulartypescript1.8
user6318574
user6318574

Reputation:

How to show error by clicking send button in angular2

I really tried a lot to get out of it,i search various sites but every where they show validations on touch or they just hide button untill form is valid.How can i how validations just by clicking button,this is what i tried so far....................

My Template,

      <form id="login-form" name="login-form" class="nobottommargin" [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate>
       <div class="col_full"> 
        <input type="text" [formControl]="form.controls['email']" id="login-form-username" name="login-form-username" value="" placeholder="username" class="form-control not-dark formcontrolheight" required>
  </div>
  <div *ngIf="form.controls['email'].touched && form.submitted">

        <strong>Email is required</strong>

  </div>
  <div class="clear"></div>
  <div class="col_full">
     <input type="password" [formControl]="form.controls['phone']" id="login-form-password" name="login-form-password" value="" placeholder="password" class="form-control not-dark formcontrolheight" required>
  </div>
  <div *ngIf="form.controls['phone'].touched && form.submitted" >

        <strong>Password is required</strong>

  </div>
  <div class="clear"></div>
  <div class="col_full nobottommargin">
     <button class="col-xs-12 button button-mini loginbuttoncss  nomargin" id="login-form-submit" name="login-form-submit" value="login">Login</button>
  </div>
  <div class="clear"></div>
  </form>

but this is not going to work,can someone suggest the best practise to get the form to onsubmit function in mycase.....

Upvotes: 3

Views: 962

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657068

Angular runs validation on each value change. What you can do is to just hide the errors until you want them to be shown.

<div *ngIf="form.controls['email'].touched && form.submitted">

form.submitted was added recently. You need to use the latest Angular2 and forms module versions.

Upvotes: 1

Related Questions