帶有ng-pattern的AngularJS不會向服務器發送無效字段

我想驗證表單中的文本輸入，因此在輸入匹配正則表達式之前無法完成表單的提交。但是，當我輸入一個錯誤的字段值，我clik提交表單被提交，但輸入值不會發送到服務器。我需要與HTML5所需的屬性相同的行爲。這是我的代碼：帶有ng-pattern的AngularJS不會向服務器發送無效字段

<div class="row"> 
    <label class="col-sm-2 label-on-left">APN</label> 
    <div class="col-sm-7"> 
     <div class="form-group label-floating"> 
      <label class="control-label"></label> 
      <input class="form-control" type="text" name="apn" ng-model="Configure3gCtrl.configure3g.apn" ng-pattern="/^[a-zA-Z0-9-.]*$/" required/> 
     </div> 
    </div> 
</div>

來源

2017-06-20 MABC

多數民衆贊成多麼角的作品，它不會在ng模型中設置的值，除非它的有效。你必須在提交函數中檢查表單的有效性。 –

值沒有被髮送，因爲當你通過不正確的模式輸入'ng-model'是'undefined' – Maher

使用ng-required時，submit按鈕不會提交表單直到該字段不爲空。我可以爲ng-pattern實現類似的功能，而不是在控制器功能中對它進行編碼嗎？ – MABC

正如我在評論說[價值不發送，因爲當你通過輸入不正確的模式ng-model是undefined。

但是，如果我們的ng-model爲invalid表單將被禁用，我們可以使用表單驗證作爲示例。

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

 
app.controller("ctrl", ["$scope", "$filter", function($scope, $filter) { 
 

 
    $scope.submit = function() { 
 
    console.log($scope.object) 
 
    } 
 

 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 

 
    <form name="form"> 
 
    <label class="col-sm-2 label-on-left">APN</label> 
 
    <input type="text" name="apn" ng-model="object.apn" ng-pattern="/^[a-zA-Z0-9-.]*$/" required /> 
 
    <button ng-click="submit()" ng-disabled="form.$invalid">submit</button> 
 
    </form> 
 

 
</div>

來源

2017-06-20 08:20:48 Maher

理想情況下，你不應該無效值發送到服務器，所以你應該disable\hide你的提交按鈕，但如果你真的需要從發送無效值以及到服務器，然後angularjs 1.3+你有ng-model-options（Read Doc）指令，可以幫助你。

只需將text type輸入標記爲ng-model-options="{allowInvalid: true }"，它也會保留無效值。

見演示：

var myApp = angular.module('myApp', []); 
 
myApp.controller('MyCtrl', function MyCtrl($scope) { 
 
    $scope.submitt = function() { 
 
    alert($scope.Configure3gCtrl.configure3g.apn); 
 
    } 
 
    $scope.Configure3gCtrl = { 
 
    configure3g: { 
 
     apn: "" 
 
    } 
 
    } 
 
});

<script src="https://code.angularjs.org/1.3.1/angular.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <form name="frm" ng-submit="submitt()" class="row"> 
 
    <label class="col-sm-2 label-on-left">APN</label> 
 
    <div class="col-sm-7"> 
 
     <div class="form-group label-floating"> 
 
     <label class="control-label"></label> 
 
     <input class="form-control" type="text" name="apn" 
 
     ng-model="Configure3gCtrl.configure3g.apn" 
 
     ng-model-options="{allowInvalid: true }" 
 
     ng-pattern="/^[a-zA-Z0-9-.]*$/" required/> 
 
     </div> 
 
    </div> 
 
    <input type="submit" value="submit" type="submit" /> 
 
    </form> 
 
</div>

也，測試從上面的代碼片段刪除ng-model-options="{allowInvalid: '$inherit' }"然後ng-model會undefined，因爲它是無效的。

來源

2017-06-20 09:41:17 anoop

帶有ng-pattern的AngularJS不會向服務器發送無效字段

回答

相關問題