Question

我有一个包含我想要验证的自定义指令的表单。如果范围不是隔离范围，我可以这样做，但如果我们有隔离范围情况，如何继续？ Here是表单包含2个字段的示例：名字和姓氏。名字直接在表格上，但姓氏在指令内。当我点击“保存”时，只有名字得到验证。有人可以指出我错过了什么吗？代码有点像这样：

主要形式：

<form class=" form form-group" name="personForm" ng-submit="saveInfo(personForm.$valid, '#/success')" novalidate>
<label for="fname"><strong>First Name:</strong></label>
<input type="text" 
             name="fname"
             class="form-control"
             ng-model="person.firstname" 
             ng-maxlength=10 
             ng-minlength=3
             ng-required="true">
<div class="error-message" ng-messages="personForm.fname.$error" data-ng-if="interacted(personForm.fname)">
    <div ng-message="required">This is a required field</div>
    <div ng-message="maxlength">max length should be 10</div>
    <div ng-message="minlength">min length should be 3</div>
</div>

<last-name ng-model="person"></last-name>
<br/>
<button class="btn btn-primary" type="submit">Save</button>

和指令（姓氏）：

    <label for="lname"><strong>Last Name:</strong></label>
<input type="text" 
             name="lname"
             class="form-control"
             ng-model="person.lastname" 
             ng-maxlength=20 
             ng-minlength=5
             ng-required="required">
<div ng-messages="personForm.lname.$error" data-ng-if="interacted(personForm.lname)">
    <div ng-message="required">This is a required field</div>
    <div ng-message="maxlength">max length of last name should be 20</div>
    <div ng-message="minlength">min length of last name should be 5</div>
</div>

...最后这是我的javascript：

var app = angular.module('MyApp',['ngRoute','ngMessages']);
app.config(function ($routeProvider) {
  $routeProvider
      .when('/success', {
          templateUrl: 'success.html'
    })
    .when('/', {
        templateUrl: 'first-name.html',
        controller: 'MyController'
    })
})

app.directive('lastName', function() {
  return {
    restrict: 'E',
    scope: {
        person: '=ngModel',
    },
    require:'ngModel',
    templateUrl: 'last-name.html'
  }
});

app.controller('MyController', function($scope, $location) {
  $scope.person = {};
  $scope.submitted = false;
  $scope.interacted = function(field) {
    return $scope.submitted || field.$dirty;
  };

  $scope.saveInfo = function(isValid, url) {
    $scope.submitted = true;    
    if (isValid) {
        $location.path(url);
    } else {
        alert('Missing values in mandatory fields');
    }
  }
});

Answer 1

我有点解决了我的问题。这是一个穷人的解决方案＆＃34;因此，我恳请阅读这篇文章的专家建议我一个更好的方法。

我的问题是＆＃34;如果已经提交了父母表格，该指令将如何知道＆＃34; （不分享范围）。我的回答是将另一个属性发送到指示表单提交的指令中（范围：{formSubmitted：＆＃39; =＆＃39;}）。

app.directive('lastName', function() {
return {
    restrict: 'E',
    scope: {
        formSubmitted: '='
    },
    require:'ngModel',
    templateUrl: './last-name.html',
    link: function(scope, element, attrs, controllers) {

        scope.$watch('lastname', function() {
            controllers.$setViewValue(scope.lastname);
        });
    }
};

}）;

因此该指令看起来有点傻:(但有效。

<last-name ng-model="person.lastname" form-submitted="submitted"></last-name>

...＆＃34;已提交＆＃34;无论如何都被用来检测是否按下了提交按钮。

因此，有了堆栈溢出的其他帖子的一些帮助（ng-form：将元素包含在指令中），我能够让它工作。 Here is the plunker也是如此。

验证表单内的自定义指令

1 个答案: