我可以访问控制器中的表单吗？

我目前正在使用以下内容。

$scope.$$childHead.customerForm[firstName]，因此:

<form name="customerForm">
<input type="text" name="firstName"
ng-model="data.customer.firstName"
tabindex="1"
ng-disabled="!data.editable"
validationcustomer />
</form>

但这只能在 Chrome 中使用，现在我尝试了以下方法:

$scope.editCustomerForm[firstName]，因此:

<form name="customerForm" ng-model="editCustomerForm">
<input type="text" name="firstName"
ng-model="data.customer.firstName" tabindex="1"
ng-disabled="!data.editable"
validationcustomer />
</form>

这不起作用。注意我的表单在一个基础选项卡内。我如何访问 firstName？

编辑 : 看起来 form没有被添加到 scope当它在一个基础标签页中。

有人有办法吗？

179099 次浏览
小开

是的，您可以访问控制器中的表单(如 医生所述)。

除非窗体是在控制器作用域中定义的 没有，而是在子作用域中定义的。

基本上，一些角度指令，如 ng-if、 ng-repeat或 ng-include，将创建一个独立的子范围。定义了 scope: {}属性的任何自定义指令也是如此。也许，你的地基组件也挡住了你的路。

当在 <form>标签周围引入一个简单的 ng-if时，我遇到了同样的问题。

更多信息请参见:

注意: 我建议你重写你的问题，你的问题的答案是 是的，但是你的问题略有不同:

我可以从控制器访问子范围中的窗体吗？

答案很简单: 没有。

小开

您可以将表单附加到父控制器中定义的某个对象。然后即使从子范围也可以到达窗体。

家长控制器

$scope.forms = {};

子范围中的某个模板

<form name="forms.form1">
</form>

问题是，在执行控制器中的代码时，并不一定要定义表单。所以你必须这么做

$scope.$watch('forms.form1', function(form) {
if(form) {
// your code...
}
});
小开

现在回答有点晚了，不过有以下选择。这对我有用，但不确定这是否是正确的方式。

在我看来，我正在这样做:

<form name="formName">
<div ng-init="setForm(formName);"></div>
</form>

在控制器里:

$scope.setForm = function (form) {
$scope.myForm = form;
}

这样做之后，我在控制器变量 $scope.myForm中得到了我的表单

小开

如果希望将表单传递给控制器以进行验证，只需将其作为参数传递给处理提交的方法即可。使用表单名称，因此对于最初的问题，应该是这样的:

<button ng-click="submit(customerForm)">Save</button>
小开

要访问控制器中的表单，必须将其添加到虚拟范围对象中。

就像 $scope.dummy = {}

对于你的情况来说，这意味着:

<form name="dummy.customerForm">

在您的控制器中，您可以通过以下方式访问表单:

$scope.dummy.customerForm

然后你就可以做

$scope.dummy.customerForm.$setPristine()

维基链接

在模型中使用’.’将确保原型继承是 因此，应该使用 <input type="text" ng-model="someObj.prop1"> 而不是 <input type="text" ng-model="prop1">

如果您真的想/需要使用原语，有两种变通方法:

1. 在子范围中使用 $Parent.ParentScopeProperty 定义一个函数 父范围，并从子范围调用它，传递原语 价值达到父级(并不总是可能的)

小开

无法访问输入的原因是因为 Foundation 选项卡(或 ng-repeat?)创建一个 隔离显微镜。解决这个问题的一种方法是使用 控制器语法:

<div ng-controller="MyController as ctrl">


<!-- an example of a directive that would create an isolate scope -->
<div ng-if="true">


<form name="ctrl.myForm">
...inputs
Dirty? \{\{ctrl.myForm.$dirty}}


<button ng-click="ctrl.saveChanges()">Save</button>
</form>


</div>


</div>

然后您可以在代码中访问 FormController，如下所示:

function MyController () {
var vm = this;
vm.saveChanges = saveChanges;


function saveChanges() {


if(vm.myForm.$valid) {
// Save to db or whatever.
vm.myForm.$setPristine();
}
}
小开

这个答案有点晚了，但我偶然发现了一个解决方案，使一切变得容易得多。

实际上，如果您使用 controller As 语法，您可以将表单名称直接分配给您的控制器，然后从“ this”变量引用它。我在代码中是这样做的:

我通过 ui-router 配置了控制器(但是你可以用任何你想要的方式来做，甚至在 HTML 中直接使用像 <div ng-controller="someController as myCtrl">这样的东西):

views: {
"": {
templateUrl: "someTemplate.html",
controller: "someController",
controllerAs: "myCtrl"
}
}

然后在 HTML 中，将表单名设置为“ controller”。“ name”如下:

<ng-form name="myCtrl.someForm">
<!-- example form code here -->
<input name="firstName" ng-model="myCtrl.user.firstName" required>
</ng-form>

现在在你的控制器里，你可以很简单的这样做:

angular
.module("something")
.controller("someController",
[
"$scope",
function ($scope) {
var vm = this;
if(vm.someForm.$valid){
// do something
}
}]);
小开

你肯定不能访问范围内的形式，因为。它不是被创造出来的。来自 html 模板的 DOM 像控制器构造函数一样加载得有点慢。 解决方案是一直观察，直到加载 DOM 并定义所有作用域！

控制器:

$timeout(function(){
console.log('customerForm:', $scope.customerForm);
// everything else what you need
});
小开

将 ng-model="$ctrl.formName"属性添加到窗体中，然后在控制器中可以通过 this.formName将窗体作为控制器内的对象访问


提交答案