重置表单字段时出错
Error in resetting form field
我有一个模式窗口,用户在其中保存数据,所以在下面,每次用户打开模式窗口时,我都将表单字段重新设置为空白,它都按预期工作,但angularjs表单验证消息由于脏检查而填充,现在我添加了$setPristine()
,但它抛出错误$setPristine()
未定义。
main.html
<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>
main.js
$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 = '';
};
ctrl.js
$scope.messageNotificationDTO = {
adminNotificationTypeCode: [],
adminNotificationName:'',
adminNotificationBody: '',
adminNotificationStartTime: '',
adminNotificationEndTime: '',
activeFlag: ''
};
$scope.adminDataSource = adminData.data;
//Set notification grid config and dataSource
$scope.messageGridOptions = messageGridConfig.messagesGridOptions;
messageGridConfig.messagesGridOptions.dataSource = MessageAdminNotificationFactory.getNotificationDataSource();
//Save Notification
$scope.saveMessages = function() {
MessageAdminNotificationFactory.saveMessageAdmin($scope.messageNotificationDTO).then(function() {
$scope.messageNotificationModal.close();
$scope.messageGridOptions.dataSource.read();
clearNotificationForm();
});
};
//Add new Notification
$scope.addMessageNotification = function() {
$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 = '';
$scope.editMessagesForm.$setPristine();
};
错误
Cannot read property '$setPristine' of undefined
---------------------------------------------更新------------------------------------------
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模型命名输入类型
<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
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 而循环只设置php中输入字段中的第一个值
- 在输入字段中将最小金额设置为
- 从Rally获取一个特定的标记,以便计算另一个字段中的值
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- JavaScript 检查隐藏字段中的值并将其设置为隐藏字段值
- 在wordpress一定时间后更改自定义字段
- 如何在HTML输入字段中添加不可删除的后缀
- Meteor-添加用户自定义字段的方法不起作用
- 互斥单选按钮和相应的输入字段
- 在IE9中的输入字段中输入焦点最近按钮
- 如果我选择不填写字段值或选项集值,则出错
- Adobe Acrobat - 使用 JavaScript 遍历 PDF 中的所有字段时出错
- 使用javascript将默认值传递给null字段时出错
- JSON解析Javascript丢失id字段时出错
- 删除动态添加的字段时出错
- ";msg":"分析JSON字段值时出错.意外的OBJECT_START
- 尝试使用Indeed API根据输入字段检索Job时出错
- 每次运行datastore.runQuery时出错:必须设置Query.Query和Query.gql_Query字段之
- 设置和检索iframe的隐藏输入字段的值时出错