Question

内部模态控制器我试图像这样设置验证器：

$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：无法读取未定义的属性“start_date”

修改

以下示例是什么问题，只需从Modal控制器取消注释行，看看控制台中有什么问题：

http://jsfiddle.net/9tasz57s/

Answer 1

它更可能与此错误相关https://github.com/angular-ui/bootstrap/issues/969

尝试将ui-bootstrap升级到最新的最佳版本并查看问题是否仍然存在。如果你无法在github的问题上升级，你会发现这个问题的几种解决方法。像https://github.com/9ci/angle-grinder/commit/a3a1bc4483e01eb235d13f29709d2fd2604a8ddc#L4R28

一样

Answer 2

更新：

该问题与CamelCasing无关，但无法从angularjs adirectly http://plnkr.co/edit/TD9Ecq（实际使用）访问来自bootstrap的表单元素。表单元素访问在加载时似乎来自控制器内的问题。还提到了正确使用有效性。但是可以从表达式中访问任意数据绑定以在加载时形成元素。很奇怪。提供工作代码。 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>

请检查这是否有帮助。现在添加了不同用法的行为。

Answer 3

这个问题相当常见，因为在编译任何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>

Answer 4

根据这篇文章Accessing angular bootstrap modal form from controller 我需要使用一个技巧，使用ng-init和$ 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/

Answer 5

我没有使用UI-bootstrap。但对我来说，似乎是它的范围问题。 ng-template为您提供了一个模板，但其范围与$ modal的范围不同。实际上它是$ modal范围的孩子。它可能是UI-Bootstrap方面的一个错误。

所以我所做的只是在ng-template的第一个div中应用了ng-controller指令。并检查模态控制器内部的值以及我的新形成的控制器（模态控制器的子项）

这是我的小提琴 -

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

请查看手表如何在每个控制器内部工作，您将看到它的范围问题。

由于

模态控制器内的$ setValidity [AngularJS]

5 个答案: