在角度完成路由后无法选择元素

我想验证我的表单，就像this pen一样。但我也使用UI路由器和我的表单字段在另一个部分页面。所以我无法选择我的表格（如下图所示）。在角度完成路由后无法选择元素

if ($scope.userForm.$valid) { 
      alert('our form is amazing'); 
     }

在控制台中出现此错误。 “TypeError：无法读取未定义的属性'$ valid'”。

那么，我应该怎么做才能抓住我的表单域来自partials？

顺便说theese是我的代码

var app = angular.module("App",['ui.router']); 

app.controller("Controller", function($scope){ 

    $scope.Go = function(){ 
     alert($scope.name); 
     if($scope.userForm.$valid){ 
      alert("Valid"); 
     } 
     else{ 
      alert("No Valid"); 
     } 
    } 

}); 

app.config(function ($stateProvider, $urlRouterProvider) { 

$urlRouterProvider.otherwise('/'); 

$stateProvider 
    .state('/', { 
     url: '/', 
     templateUrl: 'input.html' 
    })

}）;

这是我的index.html

<div ng-controller="Controller"> 
<ui-view></ui-view></div>

这是我partial.html

<form name="userForm"> 
    <input type="text" ng-model="name"/> 
    <button ng-click="Go()">Go</button></form>

来源

2015-03-02 Basar Sen

您的表单名称应该是'frm'，而不是'userForm'在您的输入html内 – 2015-03-02 13:40:55

在我的代码中，我改变了表单的名称。原因不是表格名称。 – 2015-03-02 13:46:38

@baasr sen然后请在此处添加您的代码。 – 2015-03-02 13:48:45

基本上你需要给你的形式指向父范围，想$parent.userForm &获得访问表单值初始化父控制器ui-view内的表单对象，如$scope.form = {}。然后我们会将所有表单级别的值放入其中。

HTML

<body ng-controller="Controller"> 
    <ui-view></ui-view> 
</body>

CODE

app.controller("Controller", function($scope) { 
    $scope.form = {}; 
    $scope.Go = function() { 
    alert($scope.form.name); 
    if ($scope.userForm.$valid) { 
     alert("Valid"); 
    } else { 
     alert("No Valid"); 
    } 
    } 

});

input.html

<form name="$parent.userForm"> 
    <input type="text" ng-model="form.name" /> 
    <button ng-click="Go()">Go</button> 
</form>

Working Plunkr

希望这可以帮助你，谢谢。

来源

2015-03-02 15:21:09

是的，这很有效，但它为什么总是返回“无效”？ – 2015-03-02 15:29:45

@BasarSen那是我的坏..plunkr包含错误的代码，检查更新的Plunkr .. – 2015-03-02 15:31:28

非常感谢。我很感激。这对我的工作非常重要:) – 2015-03-02 15:37:36

你可以做什么@ pankajparkar说。或者您需要修改您的状态：

$stateProvider 
    .state('/', { 
     url: '/', 
     templateUrl: 'input.html', 
     controller: 'Controller' 
    });

并删除ng-controller="Controller"。

UI路由器将自动为指定状态加载指定的控制器并将其绑定到input.html。

来源

2015-03-02 15:26:06

在角度完成路由后无法选择元素

回答

相关问题