Question

我正在使用AngularJS 1,5，我正在寻找的技巧如下。

例如，这是形式：

<form name="main">
    <div ng-repeat="user in users" ng-init="subForm='tags'+$index">
      <ng-form name="{{subform}}"
        <input type="text"  name="username" ng-model="user.username" required/>
        <input type="text"  name="name" ng-model="user.name" required/>
        <input type="email" name="email" ng-model="user.email" required/>
        <input type="hidden" name="status" ng-model="user.status"/>
      </ng-form>
    </div>
</form>

我想观察从控制器中的ng-form孩子收集的模型，以检查它们的有效性。

 self.Scope.$watch('main[subForm].$valid', function () 
 {
      if (self.Scope.myform.subForm.$valid)
      {
           $scope.user.status = true;
      }
});

有没有办法实现类似的东西，或者我应该创建一个自定义指令。

Answer 1

在此示例中，我们将模型创建为＆＃34;表单＆＃34; 并将其发送到指令，父表单如果其中一个表单有效完成后，通过完成每个表单，用户状态将更改

<强>的index.html

<div class="container" ng-app="app" ng-controller="ctrl">
    <form name="parent_form">
        <ng-form data-form="parent_form" data-list="forms"></ng-form>
        <button type="submit" class="btn btn-default" ng-disabled="parent_form.$invalid">Submit</button>
    </form>
</div>

<强> app.js

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

    app.controller("ctrl", function ($scope) {
       $scope.forms = [
          { name: "form1", isValid: false },
          { name: "form2", isValid: false }
       ];
    });

<强> ngForm.html

 <div name="form_{{form.name}}" ng-repeat="form in list">
            <h3>{{form.name}}</h3>
            <div class="form-group">
                <label for="username">username</label>
                <input type="text" class="form-control" id="username" name="username" ng-model="form.user.username" ng-required="true" />
            </div>
            <div class="form-group">
                <label for="name">name</label>
                <input type="text" class="form-control" id="name" name="name" ng-model="form.user.name" ng-required="true" />
            </div>
            <div class="form-group">
                <label for="email">email</label>
                <input type="email" class="form-control" id="email" name="email" ng-model="form.user.email" ng-required="true" />
            </div>
            <label>user state is:</label>{{form.user.status}}
            <hr />
        </div>

<强> ngForm.js

带表单处理程序的指令

app.directive("ngForm", function ($filter) {
    return {
        restrict: 'E',
        templateUrl: "ngForm.html",
        scope: {
            list: "=",
            form: "="
        },
        link: function (scope) {
            var isValid = function (list) {
                var hasUser = $filter("filter")(list, { hasUser: true }, true);
                if (hasUser.length >= 1) {
                    scope.form.$invalid = false;
                } else {
                    scope.form.$invalid = true;
                }

                angular.forEach(list, function (item) {
                    if (angular.isDefined(item.user)) {
                        if ((angular.isDefined(item.user.username) && item.user.username !== null) &&
                        (angular.isDefined(item.user.name) && item.user.name !== null) &&
                        (angular.isDefined(item.user.email) && item.user.email !== null)) {
                            item.user.status = true;
                            item.isValid = true;
                            item.hasUser = true;
                        } else {
                            item.user.status = false;
                            item.isValid = false;
                            item.hasUser = false;
                        }
                    }
                });
            }

            scope.$watch("list", function (nVal) {
                if (nVal) {
                    isValid(nVal);
                }
            }, true);
        }
    }
});

使用ngrepeat和ngform构建动态角形

1 个答案: