AngularJS範圍形式而多種形式underfined頁面上

首先，如：AngularJS範圍形式而多種形式underfined頁面上

<form class="form-horizontal" name="formCreateCtb"> 
     ...

然後我就可以很容易地訪問它在我的控制器在下列方式：

$scope.formCreateCtb.$setPristine(); // reset form validation

但只要我添加第二個窗體頁上，如：

<form class="form-horizontal" name="formCreateCtb"> 
     ... 
<form class="form-horizontal" name="formCreateCtbs"> 
     ...

那麼我就不能在像寶潔這樣的範圍內訪問第二表格reviosly：

$scope.formCreateCtb.$setPristine(); // still work OK 
$scope.formCreateCtbs.$setPristine(); // Exception: formCreateCtbs is underfined

爲什麼這種行爲，以及如何訪問形式，範圍，當我有頁上的多種形式。謝謝！

編輯： 看來問題是，在項目中，我有更復雜的標記，第二種形式住在引導標籤，不是在顯示的形式瞬間可見。當我添加第二種形式的模式，它工作正常。解決方法是將整個選項卡包裝在一個表單元素中。

來源

2016-07-15 igorGIS

可你的jsfiddle複製或plnkr – Rakeschand

使用ng-form指令

在線演示 - http://codepen.io/anon/pen/AXxVvY?editors=1010#0

HTML

<form name="formCreateCtb" novalidate> 

    <ng-form name="formCreateCtb"> 
    <label>Email</label> 
    <input type="text" class="form-control" name="email" ng-model="email" required> 
    <p class="help-block" ng-show="formCreateCtb.email.$invalid">Valid Email Address Required</p> 
    </ng-form> 

</form> 


<form name="formCreateCtbs" novalidate> 

    <ng-form name="formCreateCtbs"> 
    <label>Email 2</label> 
    <input type="text" class="form-control" name="email2" ng-model="email2" required> 
    <p class="help-block" ng-show="formCreateCtbs.email2.$invalid">Valid Email Address Required</p> 
    </ng-form> 

</form> 

<button ng-click="setPristine()">call setPristine</button>

.controller('mainController', function($scope) { 

    $scope.setPristine = function() { 
    $scope.formCreateCtb.$setPristine(); 
    $scope.formCreateCtbs.$setPristine(); 

    console.log('setPristine'); 
    }; 

});

來源

2016-07-15 12:17:38

Jossef Harush，Rakeschand感謝答覆傢伙，我在fiddleJs測試它和它的作品，也是它的工作原理在上面的演示中使用ng-form解決方案，但不在我的項目中， – igorGIS

我試圖找出示例和項目代碼之間的區別 – igorGIS

它正在爲我工作。

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope, $compile) { 
 
    'use strict'; 
 

 
    $scope.data = { 
 
    "name": "" 
 
    }; 
 

 
    $scope.reset = function() { 
 
    $scope.data.name = ""; 
 
    $scope.form.$setPristine(); 
 

 
    } 
 
    $scope.reset1 = function() { 
 
    $scope.data.name1 = ""; 
 
    $scope.form1.$setPristine(); 
 

 
    } 
 

 

 
});

input.ng-invalid.ng-dirty { 
 
    background-color: #FA787E; 
 
} 
 
input.ng-valid.ng-dirty { 
 
    background-color: #78FA89; 
 
}

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
 
    <script data-require="[email protected]" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.0.7"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body> 
 

 

 
    <div ng-controller="MainCtrl"> 
 
    <form name="form" id="form" novalidate> 
 
     <input name="name" ng-model="data.name" placeholder="Name" required/> 
 
     <button class="button" ng-click="reset()">Reset</button> 
 
    </form> 
 
    <form name="form1" id="form1" novalidate> 
 
     <input name="name1" ng-model="data.name1" placeholder="Name1" required/> 
 
     <button class="button" ng-click="reset1()">Reset</button> 
 
    </form> 
 
    <p>Pristine: {{form.$pristine}}</p> 
 
    <p> <pre>Errors: {{form.$error | json}}</pre> 
 
     <p>Pristine: {{form1.$pristine}}</p> 
 
     <p> <pre>Errors: {{form1.$error | json}}</pre> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-07-15 13:06:36

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope, $compile) { 
 
    'use strict'; 
 

 
    $scope.data = { 
 
    "name": "" 
 
    }; 
 

 
    $scope.reset = function() { 
 
    $scope.data.name = ""; 
 
    $scope.form.$setPristine(); 
 

 
    } 
 
    $scope.reset1 = function() { 
 
    $scope.data.name1 = ""; 
 
    $scope.form1.$setPristine(); 
 

 
    } 
 

 

 
});

input.ng-invalid.ng-dirty { 
 
    background-color: #FA787E; 
 
} 
 
input.ng-valid.ng-dirty { 
 
    background-color: #78FA89; 
 
}

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>AngularJS Plunker</title> 
 
    <script> 
 
    document.write('<base href="' + document.location + '" />'); 
 
    </script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> 
 
    <script data-require="[email protected]" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.0.7"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body> 
 

 

 
    <div ng-controller="MainCtrl"> 
 
    <form name="form" id="form" novalidate> 
 
     <input name="name" ng-model="data.name" placeholder="Name" required/> 
 
     <button class="button" ng-click="reset()">Reset</button> 
 
    </form> 
 
    <form name="form1" id="form1" novalidate> 
 
     <input name="name1" ng-model="data.name1" placeholder="Name1" required/> 
 
     <button class="button" ng-click="reset1()">Reset</button> 
 
    </form> 
 
    <p>Pristine: {{form.$pristine}}</p> 
 
    <p> <pre>Errors: {{form.$error | json}}</pre> 
 
     <p>Pristine: {{form1.$pristine}}</p> 
 
     <p> <pre>Errors: {{form1.$error | json}}</pre> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-03-23 09:41:57 Suvarna

AngularJS範圍形式而多種形式underfined頁面上

回答

相關問題