Issue with resetting the form field

Question

Issue with resetting the form field

Whenever a user opens a modal window to save data, I reset the form fields to blank. This works as expected, but I encountered an issue with AngularJS form validation messages appearing due to dirty check. I tried adding $setPristine() to resolve this, but it resulted in an error stating that $setPristine() is undefined.

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();
};

error

 Cannot read property '$setPristine' of undefined

javascript angularjs validation angularjs-scope

Answer 1

Answer №1

------------------------------------------Update------------------------------------------

Hey there, I have integrated your entire form into the updated plunker. Why do you anticipate $setPristine to activate when you haven't triggered it?

There are two errors you have made. Firstly, you must bind

var clearNotificationForm = function()

to the $scope as shown below. Just using a variable is not sufficient to bind the function to your $scope:

$scope.clearNotificationForm = function()
{
    // All the content above $setPristine should be placed here
}

Secondly, I don't see you invoking the above function anywhere in the form. You need to invoke it using a button, as I have done in the updated plunker. You can find the link to it at the end of the update.

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

In your scenario, once you have linked the function to the $scope, your button should look like this:

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

In your case, the function name will be as follows, but you must first bind it to the $scope:

$scope.clearNotificationForm = function()
{
}

If you found my response helpful, please consider giving it a like. Your support is highly valued.

Here is the updated Plunker

-------------------------------------First Response-----------------------------------

Firstly, ensure that you name your input types with the same ng-model as shown below:

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

You need to define your parent object messageNotificationDTO with $scope, and then define the subobjects like adminNotificationTypeCode inside it.

For example:

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

Set all the objects to empty and then reset the form like this:

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

  $scope.form.$setPristine();
}

Here is a functional example created from your controller code.

plunker

Answer 2

------------------------------------------Update------------------------------------------

Hey there, I have integrated your entire form into the updated plunker. Why do you anticipate $setPristine to activate when you haven't triggered it?

There are two errors you have made. Firstly, you must bind

var clearNotificationForm = function()

to the $scope as shown below. Just using a variable is not sufficient to bind the function to your $scope:

$scope.clearNotificationForm = function()
{
    // All the content above $setPristine should be placed here
}

Secondly, I don't see you invoking the above function anywhere in the form. You need to invoke it using a button, as I have done in the updated plunker. You can find the link to it at the end of the update.

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

In your scenario, once you have linked the function to the $scope, your button should look like this:

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

In your case, the function name will be as follows, but you must first bind it to the $scope:

$scope.clearNotificationForm = function()
{
}

If you found my response helpful, please consider giving it a like. Your support is highly valued.

Here is the updated Plunker

-------------------------------------First Response-----------------------------------

Firstly, ensure that you name your input types with the same ng-model as shown below:

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

You need to define your parent object messageNotificationDTO with $scope, and then define the subobjects like adminNotificationTypeCode inside it.

For example:

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

Set all the objects to empty and then reset the form like this:

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

  $scope.form.$setPristine();
}

Here is a functional example created from your controller code.

plunker

Issue with resetting the form field

Answer №1

------------------------------------------Update------------------------------------------

-------------------------------------First Response-----------------------------------

Similar questions

Using the inline calendar feature of Bootstrap 3 Datepicker to easily select and capture dates

Is there a method in CSS animations that allows for endlessly repeating successive animations in a specified sequence?

How to Generate an Array of JSON Objects in JavaScript on a Razor Page using a Custom ViewModel in MVC?

When using angular $resource.save for savings, the view is forced to redraw and reflow because of the collection watcher

Submitting the Ajax form will result in the quantity of the product in the cart being updated while remaining on

Assign the ng-repeat item to a variable in the controller's scope

The function '$.fn.<new_function>' is not a valid function in jQuery

Solutions for accessing data variables outside of a Vue file

The mismatch between JSON schema validation for patternProperties and properties causes confusion

Is it possible for a font to exclude the space character?

Generate a new entry and its linked data simultaneously

Using Node.js to establish communication between HTML and Express for exchanging data

Incorporating a JavaScript advertisement zone within a PHP function

What is the best way to condense all JavaScript and CSS files in MEAN.JS for a production setting?

Trigger an Ajax request upon user confirmation, which will only be prompted based on the result of a previous Ajax call

Unable to accurately render selected item from drop-down menu

What could be causing these warnings to pop up when I am utilizing the useEffect hook in React.js?

Mocking in AngularJS: Utilizing the same service with varied functions for unit testing with Jasmine

Alternative form for non-javascript browsers in the absence of script

Retrieving information from metaweather API and displaying it on an angularjs webpage