Question

我想使用摘要部分中的标签和输入值动态显示人和地址数据。当用户编辑表单字段时，带有标签+值的列表项应显示在摘要表中。如果表单中的值已被删除，则应从摘要部分中删除相关标签和值。

我为每个输入元素添加了客户端验证。我试图解决这个问题，无法弄清楚什么是最好的方法。任何帮助，将不胜感激。

示例：

// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
  $scope.vm = {
    caller: {
      person: {
        firstName: '',
        lastName: '',
        phoneOne: '',
        email: ''
      },
      address: {
        lineOne: '',
        lineTwo: ''
      }
    }
  };
  $scope.save = function() {
    console.log($scope.vm);
  }
});

// add a directive
myApp.directive('showErrors', function($timeout, $compile) {
  return {
    restrict: 'A',
    require: '^form',
    link: function(scope, el, attrs, formCtrl) {
      // find the text box element, which has the 'name' attribute
      var inputEl = el[0].querySelector("[name]");
      // convert the native text box element to an angular element
      var inputNgEl = angular.element(inputEl);
      // get the name on the text box
      var inputName = inputNgEl.attr('name');
      // only apply the has-error class after the user leaves the text box
      var blurred = false;

      inputNgEl.bind('blur', function() {
        blurred = true;
        el.toggleClass('has-error', formCtrl[inputName].$invalid);
      });

      scope.$watch(function(scope) {
        return formCtrl[inputName].$invalid;
      }, function(invalid, scope) {
        // we only want to toggle the has-error class after the blur
        // event or if the control becomes valid
        if (!blurred && invalid) {
          return
        }
        el.toggleClass('has-error', invalid);
      });

      scope.$on('show-errors-check-validity', function() {
        el.toggleClass('has-error', formCtrl[inputName].$invalid);
      });

      scope.$on('show-errors-reset', function() {
        $timeout(function() {
          el.removeClass('has-error');
        }, 0, false);
      });
    }
  }
});

.form-group .help-block {
  display: none;
}
.form-group.has-error .help-block {
  display: inline;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
  <form name="claimForm" ng-submit="save()">
    <h3>PERSON</h3>
    <div class="col-md-6">
      <div class="form-group form-caller" show-errors>
        <label class="control-label">First Name<span class="help-block" ng-if="claimForm.callerFirstName.$error.required"><i>[required]</i></span>
        </label>
        <input type="text" name="callerFirstName" ng-model="vm.caller.person.firstName" class="form-control" required="" />
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group form-caller" show-errors>
        <label class="control-label">Last Name<span class="help-block" ng-if="claimForm.callerLastName.$error.required"><i>[required]</i></span>
        </label>
        <input type="text" name="callerLastName" ng-model="vm.caller.person.lastName" class="form-control" required="" />
      </div>
    </div>
    <hr />
    <h3>ADDRESS</h3>
    <div class="col-md-6">
      <div class="form-group" show-errors>
        <label class="control-label">Address Line 1<span class="help-block" ng-if="claimForm.addressOne.$error.required"><i>[required]</i></span>
        </label>
        <input type="text" name="addressOne" ng-model="vm.caller.address.lineOne" class="form-control" required="" />
      </div>
    </div>
    <div class="col-md-6">
    <div class="form-group" show-errors>
      <label class="control-label">Address Line 2<span class="help-block" ng-if="claimForm.addressTwo.$error.required"><i>[required]</i></span>
      </label>
      <input type="text" name="addressTwo" ng-model="vm.caller.address.lineTwo" class="form-control" required="" />
    </div>
     </div>
    <hr />
    <input type="submit" id="submit" value="SUBMIT" class="btn btn-primary btn-lg" />
    {{vm | json }}
  </form>
  <h2>Summary</h2>
  <div id="person">
    <h3>PERSON </h3>
  </div>
  <hr />
  <div id="address">
    <h3>ADDRESS</h3>
  </div>
</body>

先谢谢

使用AngularJS动态显示表单数据

0 个答案: