傳遞表單輸入（而不是整個表格）對象Angularjs

-1

來指導我試圖通過formName.formInput的指令，這樣的指令模板裏面我可以用ngMessages='passedFormInput.$error'傳遞表單輸入（而不是整個表格）對象Angularjs

我的目標是創建一個快捷指令爲ngMessages用於泛型表單錯誤。

我有一個plunker：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

來源

2016-01-13 RachelC

我不知道是否會讓這變得更容易，但看起來它將使更多的意義上輸入自己指定的指令。 –

如果是在輸入上，我怎麼能打印標籤中的字符串？ – RachelC

你失蹤您的輸入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

來源

2016-01-13 17:21:25 jusopi

謝謝。這正是我的問題所在。 – RachelC

傳遞表單輸入（而不是整個表格）對象Angularjs

回答

相關問題