Question

我在指令中重置表单时遇到问题。我试图访问表单将其设置为$ setPristine但我没有运气。单击“添加”功能后，重置表单的最佳方法是什么？

这是plnkr：http://plnkr.co/edit/rajhMXVqMX8ReFQkV38Z?p=preview

var app = angular.module('myApp', []);

app.controller('contactController', function() {

  this.contacts = [
      {
        id: 1,
        name: 'Bob'
      },
      {
        id: 2,
        name: 'Sally'
      },
      {
        id: 3,
        name: 'Joe'
      }
    ]

    this.selectedContact;

    this.PublishData = function(data) {
      this.selectedContact = data;
    }

    this.UpdateData = function(data) {
      for (var i = 0; i < this.contacts.length; i++) {
        if (this.contacts[i].id === data.id) {
          this.contacts[i] = angular.copy(data);
        }
      }
    }

    this.AddData = function(data) {
      this.contacts.push(data);
      this.selectedContact = {};
    }
});


app.directive('contactDirective', function () {
    return {
      restrict: 'E',
      templateUrl: 'contact.html',
      scope: {
        myModel: '=',
        updateData: '&',
        addData: '&'
      },
      link: function (scope, element, attrs) {

          scope.$watch('myModel', function (newValue, oldValue) {

            scope.contact = angular.copy(newValue);
          });
      }
    }
});

这是我的index.html：

<div ng-controller="contactController as $ctrl">
      <div class="row col-md-12">
        <div class="col-sm-2">
          <b>Column 1</b>
          <div ng-repeat="contact in $ctrl.contacts">
            <a href="" ng-bind="contact.name" ng-click="$ctrl.PublishData(contact)"></a>
          </div>
        </div>
        <div class="col-sm-6">
          <contact-directive my-model="$ctrl.selectedContact" 
                             update-data="$ctrl.UpdateData(data)"
                             add-data="$ctrl.AddData(data)"></contact-directive>
        </div>
      </div>
    </div>

Answer 1

您正在表单对象上直接访问pristine，您需要在其中指定名称并访问该名称的原始对象。

目前你正在做

<p>Pristine: {{myForm.$pristine}}</p>

你需要做

<input type="text" name="myInput" ng-model="contact.name" />
<p>Pristine: {{myForm.myInput.$pristine}}</p>
<p>dirty: {{myForm.myInput.$dirty}}</p>

更新了 plunker here 。

修改

你可以重置原始的

$scope.myForm.myInput.$setPristine();

添加对象后重置表单上的表单

1 个答案: