关闭模态后表单对象为空答案

【问题标题】：Form object is empty after closing modal关闭模态后表单对象为空
【发布时间】：2018-07-21 07:26:18
【问题描述】：

我有两种不同模式的两种形式。当我打开第一个模式时，我console.log 附加到$scope 的表单（我的意思是我在开始时给$scope.updateSecurityForm = {} 的控制器）并给了name="updateSecurityForm"，我看到了所有属性比如$valid等等。我

当我打开第二个模态并再次console.log 第一个模态的表单时，对象是空的。然后我关闭第二个模态，然后再次打开第一个模态并在控制台中看到，我再次看到一个空对象。我希望看到表单属性，但只有一个空对象。

modal中的第一种形式：

<div class="modal-body">
  <form name="updateSecurityForm" ng-submit="updatePersonnels(upObj, updateSecurityForm)" ng-repeat="upObj in personnelProfileData" novalidate>
    <div class="col-md-4">
      <label for="vendor-name" class="control-label">Vendor Name:</label>
      <select name="vendorname" ng-model="upObj.vendor_id" class=" text-center form-control" ng-options="data.vendor_id as data.vendor_name for data in getvendetailsdata">
        {{data.vendor_name}}
      </select>
    </div>
  </form>
</div>

第二个模态：

<div class="modal-body">
  <form name="addPlumberForm" ng-submit="addPersonnelsByRole(addObj,8, addPlumberForm)" novalidate>
    <div class="col-md-4">
      <div class="form-group">
        <label for="message-text" class="control-label">
          Name of the vendor:<span style="color: red;">*</span>
        </label>
        <select class="text-center form-control ng-valid ng-empty ng-dirty ng-touched" name="vendorname" ng-model="addObj.vendor_id">
          <option value="" selected="selected">- Please select a vendor name -
          </option>
          <option ng-repeat="ae in getvendetailsdata" value="{{ae.vendor_id}}" class="ng-binding ng-scope">{{ae.vendor_name}}</option>
        </select>
      </div>
  </form>
  </div>
</div>

两种模式都在同一个页面中，并且它们大多相似。我在表单中使用了相同的names，以便于验证。

在我的控制器中，一开始我有

$scope.updateSecurityForm = {} 和 $scope.addPlumberForm = {} 如果这对阅读的人很重要。

当我进行验证时，我会得到Cannot read property '$invalid' of undefined

$scope.addPersonnelValidation = function(formName) {
    console.log(formName, "formName");
    if (formName.vendorname.$invalid) {
      $.bootstrapGrowl('Please select vendor name', {
        type: 'danger',
        delay: 2000,
      });
      return;
    }

调用验证函数：

$scope.addPersonnelsByRole = function(addObj, user_role_type_id, formName) {
  if ($scope.addPersonnelValidation(formName)) {
    //valid form
  }
}

【问题讨论】：

你在console.log(formName, "formName");得到了什么？
@AnkitAgarwal 它也是一个空对象
您如何调用 addPersonnelValidation 函数。可以分享一下代码吗
@AnilSarkar 发布了它
@DwightSchrute 在下面看到我的回答

标签： javascript angularjs

【解决方案1】：

我已将您的所有代码放在 jsfiddle 中，并且没有给出未定义的错误。尽管您的验证工作需要进行一些更正。我在最后提供了 jsfiddle 链接。让我知道这是否有帮助

在您选择的第二个模式中缺少必需的属性。
在表单标签上方的第二个模式中缺少关闭 div。

<div class="modal-body">
   <form name="addPlumberForm" ng-submit="addPersonnelsByRole(addObj,8, addPlumberForm)" novalidate>
      <div class="col-md-4">
         <div class="form-group">
            <label for="message-text" class="control-label">Name
            of the vendor:<span style="color: red;">*</span>
            </label>
            <select
               class="text-center form-control ng-valid ng-empty ng-dirty ng-touched"
               name="vendorname" ng-model="addObj.vendor_id" required>
               <option value="" selected="selected">- Please
                  select a vendor name -
               </option>
               <option ng-repeat="ae in getvendetailsdata"
                  value="{{ae.vendor_id}}" class="ng-binding ng-scope">{{ae.vendor_name}}</option>
            </select>
         </div>
         <input type="submit">
         </div>
   </form>
</div>

jsfiddle 链接：https://jsfiddle.net/anilsarkar/txbmg2wy/3/

【讨论】：