重置表单字段时出错

时间:2016-05-16 18:52:21

标签: javascript angularjs validation angularjs-scope

我有一个用户正在保存数据的模态窗口,因此每次当用户打开模态窗口时我将表单字段重置为空白它正在按预期工作但是angularjs形成验证消息填充因为脏检查现在我添加了{{ 1}}但是抛出错误dir="rtl"未定义。

main.html中

$setPristine()

main.js

$setPristine()

ctrl.js

<form id="editMessagesForm" name="editMessagesForm"
    novalidate class="border-box-sizing">
<div class="modalForm"> 
    <div class="modalBorder">
        <div class="row" ng-if="messageNotificationDTO.adminNotificationKey">
            <div class="form-group col-md-12 fieldHeight">
                <label  class="col-md-4">Message Key:</label>
                <div class="col-md-8">
                    <input type="text" class="form-control" id="messageNotificationKey"
                        name="messageNotificationKey"
                        ng-model="messageNotificationDTO.adminNotificationKey"
                        disabled="disabled">
                </div>
            </div>
        </div>
            <div class="row">
                <div class="form-group col-md-12 fieldHeight">
                    <label  class="col-md-4">Message Type:</label>
                <div class="col-md-8">
                        <select name="mesgLookUpcode" class="form-control"
                            ng-model="messageNotificationDTO.adminNotificationTypeCode" required
                            id="mesgLookUpcode"
                            ng-options="adminDataSource.id as adminDataSource.text for adminDataSource in adminDataSource">
                            <option value="">Select...</option>
                        </select>
             </div>
            </div>
        </div>
                <div class="row">
            <div class="form-group col-md-12 fieldHeight">
                <label  class="col-md-4 required">Notification Name:</label>
                <div class="col-md-8">
                    <textarea rows="2" class="form-control"
                        ng-model="messageNotificationDTO.adminNotificationName"
                        name="adminNotificationName"
                        required
                        id="adminNotificationName" txt-area-maxlen="128"
                        ng-disabled="readOnlyFlag"
                        data-tooltip-html-unsafe="<div>{{128 - messageNotificationDTO.adminNotificationName.length}} characters left</div>"
                        tooltip-trigger="{{{true: 'focus', false: 'never'}[messageNotificationDTO.adminNotificationName.length >= 0 || messageNotificationDTO.adminNotificationName.length == null ]}}"
                        tooltip-placement="top" tooltip-class = "bluefill"></textarea>
                        <p class="text-danger" ng-show="editMessagesForm.adminNotificationName.$touched && editMessagesForm.adminNotificationName.$error.required">Message Notification Name is required</p>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="modal-footer footerMargin">
        <button type="button" class="btn btn-primary pull-right mousedwncall"
            ng-click="saveMessages()" ng-disabled="editMessagesForm.$invalid"
            ng-class="{disableSaveCls:editMessagesForm.$invalid}"
            >Save</button>
        <button class="btn btn-default pull-left mousedwncall"
            ng-click="handleCancelMessageModal()">Cancel</button>
    </div>
</form>

错误

 $scope.addMessageNotification = function() {
        clearNotificationForm();
        $scope.editMessagesForm.$setPristine();
        $scope.messageNotificationModal.open().center();
    };
    var clearNotificationForm = function () {
      $scope.messageNotificationDTO.adminNotificationTypeCode = [];
      $scope.messageNotificationDTO.adminNotificationName = '';
      $scope.messageNotificationDTO.adminNotificationBody = '';
      $scope.messageNotificationDTO.adminNotificationStartTime = '';
      $scope.messageNotificationDTO.adminNotificationEndTime = '';
      $scope.messageNotificationDTO.activeFlag = '';
    };

1 个答案:

答案 0 :(得分:1)

------------------------------------------更新---- --------------------------------------

dudeee我把你的整个表单放在更新的plunker中为什么你期望$setPristine触发?当你没有触发它时。

你首先犯了两个错误,你需要将var clearNotificationForm = function ()绑定到$scope,如下所示,变量不足以将函数绑定到$scope

$scope.clearNotificationForm = function()
{
    // All your stuff to above $setPristine goes here
}

其次我没有看到你在表格的任何地方触发上述功能,你需要在按钮的帮助下触发它,就像我在更新的plunker中所做的那样你会发现在更新结束时链接。

<button class="button" ng-click="reset()">Reset</button>

在您的情况下,一旦将功能绑定到$scope,您的按钮就会如下所示:

<button class="button" ng-click="clearNotificationForm ()">Reset</button>

在您的情况下,函数名称将如下所示,但您需要先将其绑定到$scope

$scope.clearNotificationForm = function()
{
} 

如果您发现我的帖子有用,请给我一个喜欢的,我会非常感激。

这是更新后的Plunker

-------------------------------------第一反应-------- ---------------------------

首先确保使用与以下相同的ng-model命名输入类型

<input name="name1" ng-model="messageNotificationDTO.adminNotificationTypeCode" placeholder="Name" required/>

您需要使用$ scope定义父对象messageNotificationDTO,而不是在其中定义子对象adminNotificationTypeCode

例如:

$scope.messageNotificationDTO = 
{ 
    "adminNotificationTypeCode": "",
    "adminNotificationName": ""
};

将所有对象设置为空,然后重置表单,如:

$scope.reset = function()
{  
  $scope.messageNotificationDTO.adminNotificationTypeCode = "";
  $scope.messageNotificationDTO.adminNotificationName  = "";

  $scope.form.$setPristine();
}

这是一个由您的控制器代码制作的工作示例。

plunker