フォームのベストプラクティス（angularjs 1.6）

Question

コントローラとやりとりするためのフォームとそのロジックを実装するさまざまな方法を見てきました。

例：

<form name="myForm" ng-submit="submit(user)"> 
    username: <input name="username" ng-model="user.username"> 
    age: <input name="age" ng-model="user.age"> 
</form> 

その例では、コントローラ内の我々のsubmit()方法は、フォームからusernameとageを抽出する3つの方法を有するであろう：

• は$scope.myFormオブジェクトを使用します。このオブジェクトには、フォームの検証に関連する情報もあります。
• $scope.userオブジェクトを使用してください。
• submit()メソッドに渡される変数userを使用します。

私の質問は、ベストプラクティスは何ですか？

Answer 1

はのは、3つのアプローチを見てみましょう：

1. $scope.myFormは、フォーム検証目的でのみ使用する必要があります。私は通常、$scope.myForm.$invalidをチェックして送信ボタンを無効にします。

2. $scope.user - これは、この変数のみを使用し、その再利用性を低下させることを意味します。あなたはまた、より多くを入力するオーバーヘッドを持っています - $scope部分、私は賢明である。

3. 私は、第3のアプローチが、submit機能の再利用性を向上させるため、より好きです。

Answer 2

サブミット（ユーザー）に渡されるユーザー変数を使用するのが最適なアプローチです。

Answer 3

$ scopeを使用しないで、コントローラにすべてをバインドします。このようにする必要があります：

<form name="$ctrl.myForm" ng-submit="$ctrl.submit()"> 
    username: <input name="username" ng-model="$ctrl.user.username"> 
    age: <input name="age" ng-model="$ctrl.user.age"> 
</form> 

私のために提出する$ ctrl.userを渡すことは意味がありませんが、これはスタイルの問題です。

P.S.単純なケースでは、コントローラ内にFormオブジェクトは必要ありません。状況が複雑になると、それを難し​​くすることなくライブを見つけることができます。実際の例として、一部のフィールドで非同期検証を追加しようとすると、ぼかしとフォーム送信の両方で発生するはずです（ぼかしの検証がまだ完了していない場合）