Блог

У меня есть следующая угловая форма:

 <form name="client_form" id="client_form" role="form">
  <div class="bb-entry">
    <label for="firstname">First Name:*</label>
    <input type="text" name="firstname" ng-model="client.first_name" required class="form-control"/>
  </div>
  <div class="bb-entry">
    <label for="lasttname">Last Name:*</label>
    <input type="text" name="lastname" ng-model="client.last_name" required class="form-control"/>
  </div>
  <div class="bb-entry">
    <label for="email">E-mail:*</label>
    <input type="email" name="email" ng-model="client.email" required class="form-control"/>
  </div>
</form>
<button type="button" ng-click="resetForm(client_form)">Clear</button>
  

Я хотел бы добавить поведение, чтобы, когда пользователи выбирали «Очистить», все данные формы очищались. В настоящее время я написал этот метод:

 resetForm: (form) ->
  form.submitted = false
  form.$setPristine()
  angular.copy({}, client)
  

Однако это очищает весь объект клиента, хотя на самом деле я хочу очистить только атрибуты, на которые ссылаются в моей форме.

Я понимаю, что могу выполнять итерации по каждому атрибуту объекта формы, что дает мне доступ к экземплярам ngModelController как таковым:

 resetForm: (form,) ->
    form.submitted = false
    form.$setPristine()
    angular.forEach form, (value, key) ->
      if value.hasOwnProperty("$modelValue")
        # set model value here?
  

Но могу ли я на самом деле присвоить значение модели здесь или лучше использовать другой подход?

Я думаю, вам нужно сначала скопировать клиент, а затем очистить новый объект клиента.

Вот ссылка на скрипку, которая делает что-то очень похожее:http://jsfiddle.net/V44fQ /

 $scope.editClient = function(client) {
    $scope.edit_client = angular.copy(client);
}

$scope.cancelEdit = function() {
    $scope.edit_client = {};
};

<form name="client_form" id="client_form" role="form">
  <div class="bb-entry">
    <label for="firstname">First Name:*</label>
    <input type="text" name="firstname" ng-model="edit_client.first_name" required class="form-control">
  </div>
  ...
  <button type="button" ng-click="cancelEdit()">Clear</button>
</form>
  

Я решил проблему, написав две директивы, одну, которая прикреплена к форме, а другую к каждому отдельному входу, который я хочу «сбрасывать». Директива, прикрепленная к форме, затем добавляет метод resetForm() к родительскому контроллеру:

 # Adds field clearing behaviour to forms.  
app.directive 'bbFormResettable', ($parse) ->
  restrict: 'A'
  controller: ($scope, $element, $attrs) ->
    $scope.inputs = []

    $scope.resetForm = () ->
      for input in $scope.inputs
        input.getter.assign($scope, null)
        input.controller.$setPristine()

    registerInput: (input, ctrl) ->
      getter = $parse input
      $scope.inputs.push({getter: getter, controller: ctrl})


# Registers inputs with the bbFormResettable controller allowing them to be cleared
app.directive 'bbResettable', () ->
  restrict: 'A',
  require: ['ngModel', '^bbFormResettable'],
  link: (scope, element, attrs, ctrls) ->
    ngModelCtrl        = ctrls[0]
    formResettableCtrl = ctrls[1]
    formResettableCtrl.registerInput(attrs.ngModel, ngModelCtrl)
  

Возможно, это излишне, но это решение гарантирует, что будут очищены только указанные атрибуты, а не весь клиентский объект.

Не нужно усложнять. Просто очистите переменные области видимости в вашем контроллере.

Простой JS:

 $scope.resetForm = function() {
    $scope.client.first_name = '';
    $scope.client.last_name = '';
    $scope.client.email = '';
}
  

При желании вы можете проанализировать объект $scope.client и присвоить свойствам значение false (например, если форма динамическая).

Вот простой пример:http://jsfiddle.net/DLL3W /