$ setValidity內模態控制器[AngularJS]

內模態控制器我試圖建立驗證程序是這樣的：

$scope.taskForm.start_date.$setValidity("date", false);

這裏是我的html：

<input name="start_date" id="startdate" ng-model="modal.project.startDate" type="date" class="form-control" required/> 

      <!--VALIDATION--> 
<span ng-show="taskForm.start_date.date">Something</span>

但這不工作，我承擔這是因爲模態。

而且我得到這個錯誤控制檯：

TypeError: Cannot read property 'start_date' of undefined

編輯：

這裏是例子是什麼問題，從模態控制器只是取消註釋行，看看什麼是控制檯的問題：

http://jsfiddle.net/9tasz57s/

來源

2015-12-03 Vladimir

不能看到 –

它更可能與此相關的錯誤https://github.com/angular-ui/bootstrap/issues/969

嘗試將ui-bootstrap升級到最新版本並查看問題是否仍然存在。如果你不能在github的問題中升級，你會發現這個問題的幾種解決方法。像https://github.com/9ci/angle-grinder/commit/a3a1bc4483e01eb235d13f29709d2fd2604a8ddc#L4R28

來源

2015-12-07 19:05:04 luacassus

你能告訴我怎麼用的jsfiddle工作，請看看我的帖子編輯您所提供的小提琴您問題相關的東西嗎？ – Vladimir

Bootstrap可能是可能的問題。但新版本無法正常工作。請檢查我發佈的工作代碼，但它的解決方法。 – Gary

更新時間：

的問題是無關的駝峯規則，但是從引導訪問表單元素從angularjs adirectly http://plnkr.co/edit/TD9Ecq（實際使用）的無能。加載時，表單元素訪問似乎是控制器內部的問題。還提到了正確使用有效性。但是它可以在表達式中通過任意的數據綁定訪問，以便在加載時形成元素。很奇怪。提供工作代碼。 http://plnkr.co/edit/wjDjKXQ1CBI1YMzHZZOX。

<form name="taskform" on-load="{{taskform.startdate.$error['date'] = true;}}"> 
     <!-- Alternative below - Correct Usage to check or setting validity --> 
     <!-- <form name="taskform" ng-valid="{{taskform.startdate.$valid = false;}}"> --> 
     <!-- Alternative below - Alternative different behaviour shown by $error --> 
     <!-- <form name="taskform" {{taskform.startdate.$error['date'] = true;}}> --> 
     <input name="startdate" type="date" ng-model="formmodel" class="form-control" required/> 
     <span ng-show="!taskform.startdate.$error.date">Something<br/></span> 
     <span ng-show="taskform.startdate.$error.date">Something<br/></span> 
     <span ng-show="taskform.startdate.$valid">Something<br/></span> 
     <span>Error Array: {{taskform.startdate.$error}} - Validity: {{taskform.startdate.$valid}}<br/></span> 
     <button ng-click="setvalidity()">Set New Validity</button><br/> 
    </form>

請檢查是否有幫助。現在不同用法的行爲已被添加。

來源

2015-12-08 05:14:22 Gary

你能告訴我它如何使用jsfiddle，請閱讀我的主要文章編輯？ – Vladimir

這個問題相當普遍，因爲在任何html元素和指令被編譯之前Controller首先被實例化，所以它們在控制器中根本不應該可用。

解決此問題的一種常用方法是通過訪問taskForm到ng-init。通過接受taskForm作爲參數的作用域函數，您可以從那裏自由處理表單。此外，在回調中添加一個超時，以確保所有指令都已編譯並可用。

DEMO

的Javascript

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, $timeout, customer) { 

    $scope.customer = customer; 

    $scope.init = function(form) { 
    $timeout(function() { 
     form.start_date.$setValidity('date', false); 
    }); 
    }; 

});

HTML

<form name="taskForm" ng-init="init(taskForm)"> 
    <!-- contents --> 
</form>

來源

2015-12-10 05:35:42 ryeballar

但是如果我想將驗證更改爲true，該怎麼辦？ – Vladimir

然後將其設置爲true？我認爲這樣做很簡單，除非你正在考慮另一種實現？ – ryeballar

Acoording這篇文章Accessing angular bootstrap modal form from controller 我需要用一個小竅門NG-在它和$ timeout在範圍中等待表單對象初始化字段。

在HTML

<form name="taskForm" ng-init="initModal(taskForm)">

在JavaScript的控制器

$scope.initModal = function(form) { 
    //Waits for form initialize fields on object 
    $timeout(function(){ 
     form.start_date.$setValidity("date", false); 
    },0); 
    };

我的解決辦法是http://jsfiddle.net/9tasz57s/6/

來源

2015-12-10 17:54:33

但是如果我想將驗證更改爲true，該怎麼辦？ – Vladimir

我沒有太多的工作與UI的引導。但對我來說，似乎是它的範圍問題。 ng-template爲您提供了一個模板，但其範圍與您的$ modal範圍不同。其實它是$ modal範圍的孩子。這可能是UI-Bootstrap方面的一個缺陷。

所以我所做的只是在你的ng-template的第一個div中應用ng-controller指令。並檢查您的模態控制器內部的價值以及我的新形成的控制器（這是模態控制器的孩子）

這裏是我的小提琴 -

`http://jsfiddle.net/VineetDev/Lufcrh6h/`

請看看手錶的每個控制器內部是如何工作的，你會看到它的範圍問題。

感謝

來源

2015-12-11 19:50:52

$ setValidity內模態控制器[AngularJS]

回答

相關問題