角度材料を使用してフォームを検証する

Question

角度材料を使用してフォームを検証するには、機能が必要です： 1）[送信]をクリックすると、必須フィールドが空の場合にエラーメッセージが表示されます。 2）フォームフィールドが有効でない場合は、投稿要求を送信しないでください（送信しないでください）。 次のコードは送信を避けますが、クリックするとエラーメッセージが表示されず、カーソルが各入力フィールドから出ているときにのみ表示されます。

<form name="userForm"> 
<md-input-container> 
    <input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required /> 
    <div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'> 
     <div ng-message="required">This is required!</div> 
    </div> 
</md-input-container> 

<md-input-container> 
    <input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required /> 
    <div ng-messages="userForm.Password.$error"> 
    <div ng-message="required">This is required!</div> 
    </div> 
</md-input-container>        

<md-input-container> 
    <md-button id="registerUser" value="Register" class="md-raised md-primary" ng-click="userForm.$valid && vm.registerUser()" aria-label="login" ng-disabled="login.loginForm.$invalid()"> 
     Create 
    </md-button> 
</md-input-container> 
</form> 

Answer 1

あなたには2つのものがありません。

最初に： をmd-button要素に追加します。

第二：あなたform要素にnovalidateを追加します。novalidateは、ブラウザのネイティブフォームの検証を無効にするために使用されていることを

注意を。

またform要素にng-submitを使用しての代わりに、ボタンをng-clickを使用して検討すべきです。

<form name="userForm" novalidate ng-submit="userForm.$valid && vm.registerUser()"> 
    <md-input-container> 
     <input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required /> 
     <div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'> 
      <div ng-message="required">This is required!</div> 
     </div> 
    </md-input-container> 

    <md-input-container> 
     <input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required /> 
     <div ng-messages="userForm.Password.$error"> 
      <div ng-message="required">This is required!</div> 
     </div> 
    </md-input-container>        

    <md-input-container> 
     <md-button type="submit" id="registerUser" value="Register" class="md-raised md-primary" aria-label="login" ng-disabled="login.loginForm.$invalid()"> 
      Create 
     </md-button> 
    </md-input-container> 
</form>