web-dev-qa-db-ja.com

コントローラ内のフォームにアクセスできますか？

私は現在以下を使っています。

$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にアクセスするにはどうすればいいですか？

EDIT：Foundationタブ内のformがscopeに追加されていないようです。

誰もがこのための解決策を得ましたか？

angularjsangular-foundationangularjs-forms
146
Vincent

他のコメントでも触れましたが、 "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();
       }
}
205
slopapa

親コントローラで定義されているオブジェクトにフォームを添付することができます。そうすれば、子供のスコープからでも自分のフォームにたどり着くことができます。

親コントローラ

$scope.forms = {};

子スコープ内のテンプレート

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

問題は、コントローラにコードを記述するときにフォームを定義する必要がないということです。だからあなたはこのようなことをしなければなりません

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

検証目的でフォームをコントローラに渡したい場合は、送信を処理するメソッドへの引数として単純に渡すことができます。フォーム名を使用してください。元の質問では、次のようになります。

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

ちょっと答えるのが遅れました、しかし、以下のオプションが付属しました。それは私のために働いていますが、それが正しい方法であるかどうかわからない。

私の考えでは、私はこれをやっている：

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

そしてコントローラーで：

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

これを行った後、私は私のフォームを$scope.myFormである私のコントローラ変数に持っています

73
Atul Chaudhary

コントローラ内のフォームにアクセスできるようにするには、それをダミーのスコープオブジェクトに追加する必要があります。

$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">を使用してください。

もしあなたが本当にプリミティブを使いたい/必要としているなら、2つの回避策があります：

1.子スコープで$ parent.parentScopePropertyを使用します。これにより、子スコープが独自のプロパティを作成できなくなります。 2.親スコープで関数を定義し、子から呼び出して、プリミティブ値を親に渡します（常に可能とは限りません）

23
Carsten

この答えは少し遅れていますが、私はすべてをより簡単にするソリューションを見つけました。

ControllerAs構文を使用している場合は、実際にフォーム名を直接コントローラに割り当ててから、 "this"変数から参照することができます。これが私のコードでのやり方です。

私はui-router経由でコントローラを設定しました（しかし<div ng-controller="someController as myCtrl">のようなもので直接HTMLにでもあなたが望むならそれを行うことができます）これはそれがui-router設定のように見えるかもしれないものです：

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

そしてHTMLでは、フォーム名を "controllerAs"。 "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
            }
    }]);
22
FrankieAvocado

はい、あなたは（ docs で述べられているように）コントローラの中のフォームにアクセスすることができます。

あなたのフォームがでないがコントローラスコープで定義されていて、代わりに子スコープで定義されている場合を除いて.

基本的に、ng-if、ng-repeat、ng-includeなどの一部の角度指示は、独立した子スコープを作成します。 scope: {}プロパティが定義されているカスタムディレクティブも同様です。おそらく、あなたの基礎コンポーネントもあなたのやり方にあります。

ng-ifタグの周りに単純な<form>を導入するとき、私は同じ問題を抱えていました。

詳細についてはこれらを参照してください。

注：質問を書き直すことをお勧めします。あなたの質問に対する答えははいですが、あなたの問題は多少異なります。

コントローラから子スコープ内のフォームにアクセスできますか？

答えは単にnoになります。

6
Andre Torgal

フォームにng-model="$ctrl.formName"属性を追加すると、コントローラ内でthis.formNameによってコントローラ内のオブジェクトとしてフォームにアクセスできます。

2
Dhurim Kelmendi

確かにあなたはスコープのフォームにアクセスすることはできません。作成されません。 htmlテンプレートからのDOMはコントローラのコンストラクタのように少しゆっくりロードされます。解決策は、DOMがロードされ、すべてのスコープが定義されるまで監視することです。

コントローラ内：

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