Question

我正在尝试将formName.formInput传递给指令，以便在指令模板内部我可以使用ngMessages='passedFormInput.$error'

我的目标是为ngMessages创建一个通用表单错误的快捷指令。

我有一个掠夺者：https://plnkr.co/edit/SakHtD2cCqrzwAssclgp

我希望我的指令只需要<formName>.<inputName>

<form name="form" novalidate>

    <div class="form-group">
        <label for="userEmail">Email Address </label>
        <input ng-model="credentials.email" maxlength="255" required type="email" class="form-control" id="userEmail" placeholder="Email">
    </div>

    <div rc-messages="form.userEmail"></div>        
</form>

继承我的指示：

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
})
.directive('rcMessages', function() {

    return {
        require: ['^form', '^rcMessages'],
    restrict: 'A',          // Must be a attributeon a html tag
        template: '<pre><code>formInputError: {{formInputError | json }}</code></pre>' +
          '<pre><code>testForm: {{testForm | json }}</code></pre>' +
          '<div ng-messages="formInputError.$error">' +
          '<span ng-message="required">*</span>' +
          '<span ng-message="minlength">Too short.</span>' +
          '<span ng-message="maxlength">Too long.</span>' +
          '<span ng-message="email">Invalid email address.</span>' +
          '</div>meep',
        scope: false,
        controller: ['$scope', function($scope) {
            $scope.formInput = $scope.rcMessages;
            console.log('rcMessages', $scope.rcMessages);
            console.log('formInputError', $scope.formInputError);
        }],
        link: function($scope, element, attrs, ctrl) {
            $scope.testForm = ctrl;
            console.log('ctrl', ctrl);
        }
    };

});

我可以使用^Form来获取表单控制器，但我似乎无法对表单中的特定元素进行归零。

------编辑：任何正在寻找的人的解决方案。 -----

我意识到我的错误是我没有在input添加名称。给定一个名称，输入对象被添加到FormController，我可以通过rc-messages属性发送输入名称来访问它。

请参阅我更新的plunker：https://plnkr.co/edit/u14S269MOIDxvFzHP1Jt

Answer 1

您错过了输入中的name值，这就是您无法在表单控制器上访问输入值的原因。你可以用这个解决它：

<input name="userEmail" ng-model="credentials.email" maxlength="255" required 
       type="email" class="form-control" id="userEmail" placeholder="Email">

然后在link函数中，您可以像这样访问ngModelController值：

link: function($scope, elem, attrs, ctrls){
    var inputModel = ctrls[0].userEmail

顺便说一下，我不知道为什么，但我觉得这有点怀疑：

<div rc-messages="form.userEmail">

也许只是给它键，并允许指令解析formController的键userEmail的值？

<div rc-messages="userEmail">

只是一个建议。

https://plnkr.co/edit/gcgeT6pzae3UbX7ZWMWi?p=preview

将表单输入（不是整个表单）对象传递给Angularjs中的指令

1 个答案: