javascript - How to clear form in AngularJS when there is no form name - Stack Overflow

admin管理员组

文章数量:1421009

I want to use the $setPristine() and $setUntouched() functions in Angular to clear form fields. However, they seem to only work with forms that have names. What if I have a form with no name and only a simple submit function?

I read the documentation here: .FormController

This does not work:

    $scope.submit = function() {

        // blah blah

        // Resets the form fields to blank
        // I could simply do
        // $scope.field1 = '';
        // $scope.field2 = '';
        // But I want it to look cleaner

        This.$setPristine();
        This.$setUntouched();

    };

I want to use the $setPristine() and $setUntouched() functions in Angular to clear form fields. However, they seem to only work with forms that have names. What if I have a form with no name and only a simple submit function?

I read the documentation here: https://docs.angularjs/api/ng/type/form.FormController

This does not work:

    $scope.submit = function() {

        // blah blah

        // Resets the form fields to blank
        // I could simply do
        // $scope.field1 = '';
        // $scope.field2 = '';
        // But I want it to look cleaner

        This.$setPristine();
        This.$setUntouched();

    };

• javascript
• angularjs
• forms
• angularjs-scope

Share Improve this question Follow edited Mar 25, 2016 at 6:05 OneMoreQuestion asked Mar 25, 2016 at 5:54 OneMoreQuestionOneMoreQuestion 1,75344 gold badges2525 silver badges5151 bronze badges 2

• 2 Do you see any issue in adding name to your form ? Angular will create instances of FormController only for named forms as the form name is used as a property representing the FormController instance for that particular form on your scope. Without any name, it won't be able to associate the FormController instance to any property name on the scope. – Arkantos Commented Mar 25, 2016 at 6:00
• Ah thank you I see @Arkantos – OneMoreQuestion Commented Mar 25, 2016 at 6:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Angular will create instances of FormController only for named forms as the form name is used as a property representing the FormController instance for that particular form on your scope. Without any name, it won't be able to associate the FormController instance to any property name on the scope.

For example, given the following markup

<div ng-controller="MyController">

    <form name="myForm" id="myForm" ng-submit="handleSubmit()">
      /* Some Markup */
    </form>

</div>

In your MyController, $scope has a property called myForm representing the FormController instance and you can call methods or access properties like below.

$scope.myForm.$valid
$scope.myForm.$setPristine();
$scope.myForm.$setUntouched();

Calling setPristine() and setUntouched() will only change the form state from dirty to pristine and untouched as evident from the classes added to your form but do not reset the form fields. There's no public method exposed on FormController to reset the form fields and the corresponding model values but you can achieve that simply with a small change in the way you're binding values using ng-model. Using a dot(.) in your models is a good practice as it will allow to capture all the form state in a single object and also prevents you from creating shadow properties.

In your HTML,

<input type="text" id="fullName" name="fullname" ng-model="data.fullName"/>
<input type="email" id="email" name="email" ng-model="data.email" /> 

In your controller,

angular.module('MyApp', [])
      .controller('MyController', function($scope) {

  $scope.data = {
    fullName : '',
    email : ''
  };


  $scope.resetForm = function(){
   /* reset the data to a new object so that all the properties
    * of form are reset
    */
    $scope.data = {};
  };

});

Here's a sample Pen in action. Hope this helps :)

use "this" instead of "This"

try:

$scope.currentRecord={};

本文标签： javascriptHow to clear form in AngularJS when there is no form nameStack Overflow