NG单击验证不起作用

Question

I are beginer in 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按钮以获取表单行为。

我看到您已经定义了一个提交函数。我假设您想将其更改为上传文件。 如果您希望表单执行验证，请删除 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>