angularjs -how to clear the form data from a clear button outside sitting outside the form

Question

I have a form with a submit button which works fine. However I need to clear the form data from a clear button which is sitting outside the form on top right of the page. The clear button exist in a parent controller and sits above the form in top right header. The form sent from the clear button always comes up as undefined, which is because the clear button is not part of the form.

How do I pass the same instance of the form to clear? How do I clear the data? If this is a design issue I still need a workaround.

Here is a fiddle I have created to mimic that. Any help will be appreciated.

https://jsfiddle.net/SobDan/vj67rtb2/

<div ng-app>

<div class="col-md-10">
  <h2>Todo</h2></div>
<div class="col-md-2">
  <button class="btn pull-right" ng-click="clear(TodoForm)"> Close</button>

</div>
<br>
<div ng-controller="TodoCtrl">

  <form name="TodoForm" ng-submit="addTodo()" name="testForm">
    <input type="text" ng-model="todoText" size="30" placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">

  </form>

</div>

function MainCtrl($scope) { 

$scope.clear = function(form) {
    alert(form); // the form is undefined
    if (form.$dirty)
      form.setPristine(); // clean this form
    else
      alert("form not dirty");
  };
};

function TodoCtrl($scope) {

  $scope.todoText = "test";
  $scope.addTodo = function() {
    alert("Submitted");
    $scope.todoText = "";
    // submit logic works fine
  };
}

Answer 1

You should use $broadcast to communicate between controllers rather than trying to access the form which is outside scope.

Here is the fiddle and the explanation below

$broadcast function is used to broadcast events to all child $scope. Any interested child $scope can register to listen for the event using $on function. This functionality is used to communicate between controllers.

In your case, we signal to clear the form by broadcasting an event called clearForm from $rootScope. The TodoCtrl $scope listening on the event clearForm will receive a signal to clear form fields.

app.controller("MainCtrl", function($scope, $rootScope) {
  $scope.clear = function(form) {
    $rootScope.$broadcast("clearForm");
  };
});

app.controller("TodoCtrl", function($scope) {  
  $scope.$on("clearForm", function() {
    if ($scope.testForm.$dirty) {
      $scope.testForm.$setPristine();
      $scope.todoText = "";
    } else {
      alert("form not dirty");
    }   
  });
});

AngularJS 1.1.x +

$scope.form.$setPristine() is only available from AngularJS version 1.1.x.

$setPristine() will only set the form status to pristine and will not clear the form field. You need to manually clear it by nullifying the $scope variables which will be reflected on the screen.

if ($scope.testForm.$dirty) {
  $scope.testForm.$setPristine();
  $scope.todoText = "";
}

AngularJS 1.0.x +

$setPristine function is not available in 1.0.x version.

The example Fiddle in your question seem to be configured to 1.0.x

In 1.0.x you simply clear the $scope variables

  $scope.$on("clearForm", function() {
      $scope.todoText = "";
  });