Ng單擊驗證不起作用

Question

我是angular js的初學者。 我正在驗證帶有某些輸入字段的表單，並且表單在ng-click上發布，但是驗證不起作用，驗證消息顯示為白色，然后消失，我必須在驗證后提交表單。 表格ng-click才有效，除非表格有效。 提前致謝。

 <form name="teamForm" novalidate ng-submit="submit(teamForm)" class="formfields"> <div class="col-md-12"> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label for="lname">First Name:</label> <input type="text" name="firstname" ng-model="FirstName" class="form-control custom-form-control" placeholder="First Name" required="required"> <span class="text-danger" ng-show="(teamForm.firstname.$dirty || submitted) && teamForm.firstname.$error.required">Required</span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label for="lname">Last Name:</label> <input type="text" name="lastname" ng-model="LastName" class="form-control custom-form-control" placeholder="Last Name" required="required"> <span class="text-danger" ng-show="(teamForm.lastname.$dirty || submitted) && teamForm.lastname.$error.required">Required</span> </div> </div> </div> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label for="email">Email:</label> <input type="text" name="email" ng-model="Email" class="form-control custom-form-control" ng-pattern="/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/" placeholder="Email" required="required"> <span class="text-danger" ng-show="(teamForm.email.$dirty || submitted) && teamForm.email.$error.required">Required</span> <span class="text-danger" ng-show="teamForm.email.$dirty &&teamForm.email.$error.pattern">Please Enter Valid Email</span> </div> </div> <div class="col-md-6 col-sm-6"> <div class="form-group"> <label>Phone Number:</label> <div class="clearfix"></div> <input type="text" name="phone" ng-model="Phone" class="form-control custom-form-control" placeholder="XXXXXXXXXX" required="required"> <span class="text-danger" ng-show="(teamForm.phone.$dirty || submitted) && teamForm.phone.$error.required">Required</span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label>Message:</label> <textarea class="form-control rounded-0" rows="5" name="comment" placeholder="Message" ng-model="Comment" required="required"></textarea> <span class="text-danger" ng-show="(teamForm.comment.$dirty || submitted) && teamForm.comment.$error.required">Required</span> </div> </div> </div> <div class="row"> <div class="col-md-12 col-sm-12"> <div class="form-group"> <label>Upload Resume:</label> <!--<input type="file" name="ResumePath" id="filehandler" />--> <input type="file" id="file1" name="file" class="filelabel sr-only" multiple ng-files="getTheFiles($files)" onchange="Checkfiles($(this))" /> <!-- <input type="file" name="file" onchange="angular.element(this).scope().uploadFile(this.files)"/> --> <label for="file1" class="form-control"> <span><i class="fa fa-file"></i>&nbsp;Drag file here or choose file</span> </label> </div> </div> </div> <div class="row"> <div class="col-sm-6"> <div class="form-group"> <div vc-recaptcha key="'6Lc860IUAAAAAAyWI9WD8EV4eITu4ODdhuYHdzi8'" class="grecaptcha" ng-model="respone1"></div> </div> </div> </div> <div class="col-sm-6"> <div class="form-group"> <button type="button" id="btnSubmit" ng-click="uploadFiles()" value="Upload" class="btn btn-green center-block pull-left"> <i class="fa fa-send"></i>{{btnText}}</button> </div> </div> <div class="form-group text-center"> <h5 class="text-success" style="font-weight:bold">{{messagesuccess}}</h5> <h5 class="text-danger" style="font-weight:bold">{{messageerror}}</h5> </div> </div> </form> 

Answer 1

ng-click （或者是香草堂兄， onclick ）不檢查表單驗證。 需要在表單級別定義提交功能，然后指定哪個按鈕充當submit按鈕以獲取表單行為。

我看到您已經定義了一個提交功能。 我假設您想將其更改為uploadFiles。 並且，如果您希望表單進行驗證，請刪除novalidation屬性。

<form name="teamForm" ng-submit="uploadFiles()" class="formfields">

然后，對於該按鈕，您可以將其指定為“提交”按鈕，然后刪除ng-click。

    <button type="submit" id="btnSubmit"
      value="Upload"
      class="btn btn-green center-block pull-left">
      <i class="fa fa-send"></i>{{btnText}}</button>