javascript - 如何验证某些字段并在ng-click AngularJS上进行选择

我有一些输入字段和一些选择选项的列表，因此我希望在ng-click上需要它们，并以PopupMenu或类似的形式，或者是通过任何合适的方式显示，就在特定的必需项上方引发一条消息要求在现场警告

就我而言，层次结构：

<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上调用。

我的输出：


我期望的输出：



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

最佳答案

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>