Ng-click 验证不起作用

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>

Ng-click 验证不起作用

Ng-click validation is not working

angularjs

validation

angularjs-ng-click