angular2에서 유효성 검사를 수행하는 방법

Question

나는 제출 버튼을 클릭 할 때 오류가있는 필드를 표시해야하는 방식으로 내 fileds에 대한 유효성 검사를 수행하려고합니다. 누구든지 나를 도와주세요 ...... .......

<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

나는 정확하지 않으나 나에게 잘 작동합니다. 이 코드를 참조하십시오 :

<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

간단한 검증이 시도 ....

 <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>