在角度完成路由後無法選擇元素

我想驗證我的表單，就像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

在角度完成路由後無法選擇元素

回答

相關問題