컨트롤러에서 양식에 액세스 할 수 있습니까?

컨트롤러에서 양식에 액세스 할 수 있습니까?

---

현재 다음을 사용하고 있습니다.

$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>

작동하지 않습니다. 내 양식은 Foundation 탭 안에 있습니다. 어떻게 액세스 할 수 firstName있습니까?

편집 : Foundation 탭 안에있을 때 form추가되지 않은 것처럼 보입니다 scope.

누구든지 이것에 대한 해결책을 가지고 있습니까?

---

다른 의견에서 언급되었지만 "Controller As"구문을 사용하는 사람들에게는 약간의 철자가 필요하다고 생각했습니다.

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

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

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

</div>

그런 다음 코드에서 FormController에 액세스 할 수 있습니다.

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

    function saveChanges() {

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

---

부모 컨트롤러에 정의 된 일부 개체에 양식을 첨부 할 수 있습니다. 그러면 하위 범위에서도 양식에 도달 할 수 있습니다.

부모 컨트롤러

$scope.forms = {};

하위 범위의 일부 템플릿

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

문제는 컨트롤러에서 코드를 실행할 때 양식을 정의 할 필요가 없다는 것입니다. 그래서 당신은 이런 식으로해야합니다

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

---

유효성 검사 목적으로 양식을 컨트롤러에 전달하려면 제출을 처리하는 메소드에 인수로 전달하면됩니다. 양식 이름을 사용하면 원래 질문의 경우 다음과 같습니다.

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

---

답이 늦었지만 다음 옵션이 제공되었습니다. 그것은 나를 위해 일하고 있지만 그것이 올바른 방법인지 아닌지 확실하지 않습니다.

내 생각에 나는 이것을하고있다 :

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

그리고 컨트롤러에서 :

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

이제이 작업을 수행 한 후 컨트롤러 변수에서 양식을 얻었습니다. $scope.myForm

---

컨트롤러에서 폼에 액세스하려면 더미 스코프 객체에 폼을 추가해야합니다.

같은 것 $scope.dummy = {}

상황에 따라 다음과 같은 의미가됩니다.

<form name="dummy.customerForm">

컨트롤러에서 다음을 통해 양식에 액세스 할 수 있습니다.

$scope.dummy.customerForm

and you will be able to do stuff like

$scope.dummy.customerForm.$setPristine()

---

WIKI LINK

Having a '.' in your models will ensure that prototypal inheritance is in play. So, use <input type="text" ng-model="someObj.prop1"> rather than <input type="text" ng-model="prop1">

If you really want/need to use a primitive, there are two workarounds:

1.Use $parent.parentScopeProperty in the child scope. This will prevent the child scope from creating its own property. 2.Define a function on the parent scope, and call it from the child, passing the primitive value up to the parent (not always possible)

---

This answer is a little late, but I stumbled upon a solution that makes everything a LOT easier.

You can actually assign the form name directly to your controller if you're using the controllerAs syntax and then reference it from your "this" variable. Here's how I did it in my code:

I configured the controller via ui-router (but you can do it however you want, even in the HTML directly with something like <div ng-controller="someController as myCtrl">) This is what it might look like in a ui-router configuration:

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

and then in the HTML, you just set the form name as the "controllerAs"."name" like so:

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

now inside your controller you can very simply do this:

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

---

Yes, you can access a form in the controller (as stated in the docs).

Except when your form is not defined in the controller scope and is defined in a child scope instead.

Basically, some angular directives, such as ng-if, ng-repeat or ng-include, will create an isolated child scope. So will any custom directives with a scope: {} property defined. Probably, your foundation components are also in your way.

I had the same problem when introducing a simple ng-if around the <form> tag.

See these for more info:

• https://groups.google.com/forum/#!topic/angular/B2uB8-9_Xbk

• AngularJS - losing scope when using ng-include

Note: I suggest you re-write your question. The answer to your question is yes but your problem is slightly different:

Can I access a form in a child scope from the controller?

To which the answer would simply be: no.

---

add ng-model="$ctrl.formName" attribute to your form, and then in the controller you can access the form as an object inside your controller by this.formName

---

Definitely you can't access form in scope bec. it is not created. The DOM from html template is loaded little bit slowly like controller constructor. the solution is to watch until DOM loaded and all the scope defined!

in controller:

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

참고URL : https://stackoverflow.com/questions/19568761/can-i-access-a-form-in-the-controller