2017-07-30 12 views
1

ユーザーが送信フォームをクリックした後に検証メッセージを表示したいとします。 などのテキストボックスが必要です。ユーザーが送信ボタンを直接クリックすると、検証フィールドが表示されます。フォームをAngularjsで送信する際の確認メッセージを表示

ここで、ユーザーがフォームをクリックしても何も起こりません。

<body ng-controller="AppController as ctrl"> 

<form ng-submit="ctrl.submit()" name="myForm" novalidate> 
    <input type="text" ng-model="ctrl.user.username" name="uname" class="username" placeholder="Enter your name" required ng-minlength="3" /> 
    <span ng-show="myForm.$dirty && myForm.uname.$error.required">This is a required field</span> 

    <input type="text" ng-model="ctrl.user.address" placeholder="Enter your Address" /><br /><br /> 

    <input type="email" ng-model="ctrl.user.email" name="email" class="email" placeholder="Enter your Email" required /> 
    <span ng-show="myForm.$dirty && myForm.email.$error.required">This is a required field</span> 

    <input type="submit" value="Submit"> 
</form> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"> 
</script> 
<script> 
    angular.module('myApp', []) 
    .controller('AppController', [function() { 
     var self = this; 
     self.submit = function() { 
      console.log('Form is submitted with following user', self.user); 
     }; 
    }]); 
</script> 

答えて

2

角度、それはtrueに、フォームレベルで$submittedプロパティを作成し、フォームを送信すると、またそれはformのクラス属性にng-submittedクラスを追加します。

あなたはそのフォームが送信された識別するために myForm.$submittedのようなフォームオブジェクトの $submittedプロパティを使用することができ

ng-show="myForm.$submitted && myForm.uname.$error.required" 

Demo Plunker

+0

あなたには、いくつかの有用なリンクを提案することができますおかげで、角度1を勉強しています。 – Dave

関連する問題