Question

在我的应用程序中有一个表单，它具有输入字段，多个库图像上传和使用php的服务器端验证。因此，我无法将此表单作为$ http.post（）方法提交，因此我将操作网址放在此表单上表单，但问题是，如果我单击不带动作url的提交按钮，则列出所有错误，但带动作url，它将重定向到动作url，而没有验证消息，因此任何解决方案都可以显示带有形式的验证消息，其中包含角度js中的动作url < / p>

 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>

如何在Angular js中显示表单验证错误消息，并且该表单具有操作URL

0 个答案: