So führen Sie Validierungen in angular2 durch

Question

Ich versuche, Validierungen an meinen Dateien so durchzuführen, dass wenn ich auf "Senden" -Button klicke, Fehler in Feldern angezeigt werden muss, die leer sind.Kann mir bitte helfen ...... .......

<div *ngFor="let detail of details" class="nopadding col-sm-12"> 

    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin col-sm-12 formpaddingcss" name="template-contactform" novalidate="novalidate"> 
     <div class="form-process"></div> 
     <div class="col_half"> 
      <label for="template-contactform-name">First Name <small>*</small></label> 
      <div class="input-group divcenter"> 
       <span class="input-group-addon noradius"><i class="icon-user iconcolorcss"></i></span> 
       <input type="email" data-toggle="tooltip" data-placement="top" title="Enter Firstname!" name="widget-subscribe-form-email" class="form-control required email formcontrolheight" [formControl]="form.controls['firstname']" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true"> 
      </div> 
     </div> 


     <div class="clear"></div> 
     <div class="col_full"> 
      <button class="button button-blue button-mini bottommargin-sm pull-right text-right" type="submit">Save</button> 
     </div> 
     <div class="clear"></div> 
</div> 

Answer 1

Ich mache es nicht korrekt oder nicht, aber das funktioniert gut mit mir. Siehe diesen Code:

<form id="discussion_form" name="discussion_form" ng-submit="addDiscussion(discussion_form.$valid)" novalidate> 
<div class="row"> 
    <div class="col-md-12"> 
     <div class="form-group"> 
      <label for="dis_title">Topic<span>*</span></label> 
      <input type="text" id="dis_title" class="form-control" name="dis_title" placeholder="e.g., about independence day celebration." required ng-model="discussionDetails.dis_title"> 
      <label for="dis_title" class="form_errors" ng-show="discussion_form.dis_title.$invalid && !discussion_form.dis_title.$pristine">Please enter a discussion topic</label><!--To show error msg--> 
     </div> 
    </div> 
</div> 
<button type="submit" class="btn btn-primary pull-right" ng-disabled="discussion_form.$invalid">Submit</button> 

Answer 2

Versuchen Sie, diese für einfache Validierungen ....

 <input type="email" title="Enter Firstname!" class="form-control required email formcontrolheight" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true"> 
     <span *ngIf="clicked && !detail.firstname || !detail.firstname.trim()" class="error">Error Its empty</span> 

     <button (click)="clicked = true"></button>