AngularJSフォームの送信/キャンセルボタン

SubmitおよびCancel Butoonを使用してフォームを作成しようとしていて、AngularJSを使用して検証しています。AngularJSフォームの送信/キャンセルボタン

しかし、検証動作はちょっとファンキーです。私は、バリデーションをviewValueにすることを好むでしょうが、少なくともサブミットボタンが押されるまで延期されるべきです。現在、ユーザーがテキストをボックスに入力して送信せずにぼかした場合、modelValueがまだ空のため、検証エラーがスローされます。

カスタムディレクティブを使用せずに、またはコントローラを変更する方法があることを願っています。フォームはネストされた構造の一部として構想されているので、理想的には自己完結型です。ここで

http://plnkr.co/edit/Upn3n4XM6GC1o4KigFnl?p=preview

<body ng-app="mainModule"> 
    <div ng-controller="mainController"> 

     <form name="personForm" ng-model-options="{ updateOn: 'submit' }" novalidate> 
      <md-input-container> 
       <label>First name:</label> 
       <input id="firstNameEdit" type="text" name="firstName" ng-model="person.firstName" required/> 
       <div ng-messages="personForm.firstName.$error" role="alert"> 
        <div ng-message="required">You did not enter a first name</div> 
       </div> 
      </md-input-container> 
      <br/> 
      <md-input-container> 
       <label>Last name:</label> 
       <input id="lastNameEdit" type="text" name="lastName" ng-model="person.lastName" required/> 
       <div ng-messages="personForm.lastName.$error" role="alert"> 
        <div ng-message="required">You did not enter a last name</div> 
       </div> 
      </md-input-container> 
      <br/> 
      <md-button type="submit">Save</md-button> 
      <md-button ng-click="personForm.$rollbackViewValue();">Cancel</md-button> 
      <!-- <ng-include src="'addressForm.html'"></ng-include> --> 
     </form> 
     <br/> 
     <strong> 
      <label for="userDebugText">Person:</label> 
     </strong><br/> 
     <!-- <textarea id="userDebugText">{{person | json}}</textarea><br/> --> 
     <pre id="userDebugText">{{person | json}}</pre> 
     <br/> 
     <strong> 
      <label for="firstNameTxt">personForm.firstName:</label> 
     </strong><br/> 
     <pre id="firstNameTxt">{{personForm.firstName | json}}</pre> 
     <strong> 
      <label for="lastNameTxt">personForm.lastName:</label> 
     </strong><br/> 
     <pre id="lastNameTxt">{{personForm.lastName | json}}</pre> 
     <strong> 
      <label for="lastNameTxt">personForm:</label> 
     </strong><br/> 
     <pre id="personFormTxt">{{personForm | json}}</pre> 

    </div> 
</body>

出典

2016-11-02 Matt

あなたの質問は意味がありません。それを言い換えてください – Aravind

ディレクティブを使用して検証を形成するためのアプローチについて説明します記事です。

一般的なアプローチは、フォームが完全に有効になるまでフォームの送信を防止することです。これはユーザーエクスペリエンスが悪いことです。この1は、より優れたユーザーエクスペリエンスここ

http://blog.yodersolutions.com/bootstrap-form-validation-done-right-in-angularjs/

出典

2016-11-02 23:47:39 Mikkel

になり、テンプレートとコントローラにおける方法でビルドフォーム検証機能で使用され、唯一の角度「いいえカスタムディレクティブ」の例です。それはあなたを助けるでしょう。

http://plnkr.co/edit/lbiKfYbkZJWSu5oUmsAe?p=preview

HTML：

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <form name="userForm" novalidate> 
     <label> 
     First Name: <br/> 
     <input name="firstname" type="text" ng-model="user.firstName" required><br /> 
     <span ng-show="userForm.firstname.$error.required && isSubmitted">Please enter First name<br /></span><br /> 
     </label> 
     <label> 
     Last Name: <br/> 
     <input name="lastname" type="text" ng-model="user.lastName" required><br /> 
     <span ng-show="userForm.lastname.$error.required && isSubmitted">Please enter Last name<br /></span><br /> 
     </label> 
     <button ng-click="submitUser()">Submit</button>&nbsp;<button>Cancel</button> 
    </form> 
    <pre>{{ user|json }}</pre> 
    </body> 

</html>

JS：

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.isSubmitted = false; 
    $scope.submitUser = function() { 
    $scope.isSubmitted = true; 
    }; 
});

出典

2016-11-03 11:48:31

AngularJSフォームの送信/キャンセルボタン

答えて

関連する問題