How to show form validation error message in Angular js and that form have action url

问题

In My app there is a form,it have input field,multiple gallery image upload and server side validation using php.So i can't submit this form as $http.post() method so i put action url on this form but the problem is if i click submit button without action url then all errors are listed but with action url,it is redirect to action url with out validation message so is any solution to show validation messages with form contain action url in angular js

 angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
     .controller('AppCtrl', function($scope) {
    });

.inputdemoErrors .inputErrorsApp {
  min-height: 48px; }
.inputdemoErrors md-input-container > p {
  font-size: 0.8em;
  text-align: left;
  width: 100%; }

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Errors</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <link rel='stylesheet' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.10/angular-material.css'>
  <link rel='stylesheet' href='https://material.angularjs.org/1.1.10/docs.css'>

</head>

<body>

  <div ng-controller="AppCtrl" layout="column" ng-cloak="" class="inputdemoErrors" ng-app="MyApp">

    <md-content layout-padding="">
      <form name="projectForm"  novalidate>
      
      <!--<form name="projectForm"  method="post" action="insert.php"  novalidate>  
      This is Actually i need-->

        <md-input-container class="md-block">
          <label>Description</label>
          <input md-maxlength="30" required="" md-no-asterisk="" name="description" ng-model="project.description">
          <div ng-messages="projectForm.description.$error">
            <div ng-message="required">This is required.</div>
            <div ng-message="md-maxlength">The description must be less than 30 characters long.</div>
          </div>
        </md-input-container>

        <div layout="row">
          <md-input-container flex="50">
            <label>Client Name</label>
            <input required="" name="clientName" ng-model="project.clientName">
            <div ng-messages="projectForm.clientName.$error">
              <div ng-message="required">This is required.</div>
            </div>
          </md-input-container>

          <md-input-container flex="50">
            <label>Project Type</label>
            <md-select name="type" ng-model="project.type" required="">
              <md-option value="app">Application</md-option>
              <md-option value="web">Website</md-option>
            </md-select>
          </md-input-container>
        </div>

        <md-input-container class="md-block">
          <label>Client Email</label>
          <input required="" type="email" name="clientEmail" ng-model="project.clientEmail" minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/">

          <div ng-messages="projectForm.clientEmail.$error" role="alert">
            <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
              Your email must be between 10 and 100 characters long and look like an e-mail address.
            </div>
          </div>
        </md-input-container>

        <md-input-container class="md-block">
          <label>Hourly Rate (USD)</label>
          <input required="" type="number" step="any" name="rate" ng-model="project.rate" min="800" max="4999" ng-pattern="/^1234$/">

          <div ng-messages="projectForm.rate.$error" multiple="">
            <div ng-message="required">
              You've got to charge something! You can't just <b>give away</b> a Missile Defense
              System.
            </div>

            <div ng-message="min">
              You should charge at least $800 an hour. This job is a big deal... if you mess up,
              everyone dies!
            </div>

            <div ng-message="pattern">
              You should charge exactly $1,234.
            </div>

            <div ng-message="max">
              {{projectForm.rate.$viewValue | currency:"$":0}} an hour? That's a little ridiculous. I
              doubt even Bill Clinton could afford that.
            </div>
          </div>
        </md-input-container>

        <md-input-container class="md-block">
          <md-checkbox name="tos" ng-model="project.tos" required="">
            I accept the terms of service.
          </md-checkbox>
          <div ng-messages="projectForm.tos.$error" multiple="" >
            <div ng-message="required">
              You must accept the terms of service before you can proceed.
            </div>
          </div>
        </md-input-container>

        <div>
          <md-button type="submit">Submit</md-button>
          <!--<md-button type="button" ng-click="">Submit</md-button>-->
        </div>
      </form>

    </md-content>

  </div>

<!--
Copyright 2018 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
-->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-messages.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.10/angular-material.js'></script>



</body>

</html>

来源：https://stackoverflow.com/questions/51625836/how-to-show-form-validation-error-message-in-angular-js-and-that-form-have-actio

标签

javascript

angularjs

forms

validation

angularjs-material