1

わかりましたので、次のようなフォームを作成しています。

<form novalidate class="simple-form" action="" name="mainForm" ng-submit="doSubmit()" method="POST">
    <div ng-form name="giftForm" class="panel-body">
         <input type="text"
                   id="x_amount"
                   name="x_amount"
                   class="form-control input-lg"
                   ng-model="giftForm.amount"
                   ng-required="true">
    </div>
    <div class="row">
        <button type="submit" class="btn" ng-disabled="mainForm.$invalid">Submit</button>
    </div>
</form>

これは検証のために機能します。つまり、mainForm.$invalid のみが強調表示され、入力にテキストが含まれた後にボタンが有効になります。ただし、batarang を使用すると、スコープが次のようになっていることに気付きました。

{"giftForm":{"x_amount":{},"amount":"a"}}

そのため、名前と宣言された ng-model に基づいてモデル値を作成しています。それらを同じように変更すると、次のようになります。

<input type="text"
                   id="x_amount"
                   name="x_amount"
                   class="form-control input-lg"
                   ng-model="giftForm.x_amount"
                   ng-required="true">

送信は、次の正しい範囲を示しています。

{"giftForm":{"x_amount":"a"}}

しかし、入力フィールドは最初に入力に [オブジェクト オブジェクト] と表示されます。これは、ここで何かを混乱させていると思います.....すべての入力フィールドにそれを含めることはできません。

名前とモデルを同じにしてほしい。それは漸進的な拡張方法のようであり、単に ng-submit メソッドを削除するだけで通常の非 ajax 投稿を許可し、ajax の方法は次のようになります。

$http({
         method  : 'POST',
         url     : 'formAction.do',
         data    : $.param(angular.toJson($scope.mainForm)),
         headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  
            })
                .success(function(data) {
                   //success
                })
                .error(function(data, status, headers, config) {
                    //error
                });

誰かが私が欠けているものについての洞察を持っているか、私のアーキテクチャにゼロから欠陥がある場合は、知恵をいただければ幸いです....

4

2 に答える 2

1

フォームに名前を付けると、変数がその名前のスコープに配置されます。その下に、フォーム フィールド名にちなんで名付けられたプロパティを配置します。ただし、フォーム:と同じ名前のモデルがスコープ内に既に存在しますgiftForm。これは混乱を引き起こします: テンプレートがモデルを上書きするか、またはその逆です。

したがって、そのうちの 1 つに別の名前を付けます。たとえば、モデルに名前を付けますgiftModel。

于 2014-01-09T17:22:21.920 に答える