如何验证某些字段并选择ng-click AngularJS

时间:2018-01-19 06:24:51

标签: javascript jquery css angularjs

我有一些输入字段列表和一些选择选项,所以我希望在ng-click时需要它们,并在PopupMenu形式的特定必需项目上提出一条消息,或者 what显示的合适方式需要在现场进行警告

我的案例中的层次结构:

<form>
   <input required
   <input required

   location form for multiple records (not form tag)

   contact form for multiple contacts (not form tag)

   submit button to post (input required), all locations and all contacts.
</form>

我的表格:

<div class="form-inline">
    <div class="form-group">
        <input type="text" placeholder="Legal Name" ng-model="companyForm.legalName" required/>
    </div>
    <div class="form-group">
        <input type="text" placeholder="EIN" ng-model="companyForm.ein"/>
    </div>
    <div class="form-group" id="selectFormationDiv">
        <select id="formationListId"></select>
    </div>
    <div class="form-group">
        <input type="checkbox" style="margin-top: 5px;" ng-model="companyForm.internal"/> <b>Internal</b>
    </div>
</div>

注意这不是表单,也不会在ng-submit上调用。

我的输出: enter image description here

我想要的输出: enter image description here

  

请指导我如何编码以获得所需的输出。感谢

1 个答案:

答案 0 :(得分:1)

angular.module('app', [])
.error {
  color: red;
}
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app='app'>
  <form name="form" class="css-form" novalidate>
    <input type='text' ng-model='temp1' required name='temp1' />
    <span ng-show="form.temp1.$error.required && form.$submitted" class='error'>
      field1 is required
    </span>
    <br>
    <input type='text' ng-model='temp2' required name='temp2' />
    <span ng-show="form.temp2.$error.required && form.$submitted" class='error'>
      field2 is required
    </span>
    <br>
    <input type="submit" value="Save" />
  </form>
  <hr>

  <!--Solution without `<form>` tag: -->
  <input type='text' ng-model='temp3' name='temp3' />
  <span ng-show="!temp3 && $submitted" class='error'>field3 is required</span>
  <br>
  <input type='text' ng-model='temp4' name='temp4' />
  <span ng-show="!temp4 && $submitted" class='error'>field4 is required</span>
  <br>
  <input type="button" ng-click='$submitted=true' value="Save" />
</div>