Angularjs ป้องกันการส่งแบบฟอร์มเมื่อการตรวจสอบอินพุตล้มเหลว

ฉันกำลังเขียนรูปแบบการเข้าสู่ระบบอย่างง่ายโดยใช้ angularjs กับการตรวจสอบอินพุตฝั่งไคลเอ็นต์บางส่วนเพื่อตรวจสอบว่าชื่อผู้ใช้และรหัสผ่านไม่ว่างเปล่าและยาวกว่าสามอักขระ ดูรหัสด้านล่าง:

<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
    <fieldset>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-user"></i></span>
            <input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
        </div>

        <div class="control-group input-prepend">
            <span class="add-on"><i class="icon-lock"></i></span>
            <input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
        </div>

        <div class="control-group">
            <input class="btn" type="submit" value="Log in">
        </div>

    </fieldset>
</form>

และตัวควบคุม:

var controller = function($scope) {

    $scope.login = {
        submit: function() {

            Console.info($scope.login.username + ' ' + $scope.login.password);
        }
    }

};

ปัญหาคือlogin.submitฟังก์ชั่นจะถูกเรียกแม้ว่าอินพุตไม่ถูกต้อง เป็นไปได้หรือไม่ที่จะป้องกันพฤติกรรมนี้

ในฐานะที่เป็นบันทึกด้านข้างฉันสามารถพูดถึงว่าฉันใช้ bootstrap และ requirejs เช่นกัน

คุณทำได้:

<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">

ไม่จำเป็นต้องตรวจสอบคอนโทรลเลอร์

เปลี่ยนปุ่มส่งเป็น:

<button type="submit" ng-disabled="loginform.$invalid">Login</button>

ดังนั้นคำตอบที่แนะนำจาก TheHippo ไม่ได้ผลสำหรับฉันแทนที่จะจบลงด้วยการส่งแบบฟอร์มเป็นพารามิเตอร์ไปยังฟังก์ชันดังนี้:

<form name="loginform" novalidate ng-submit="login.submit(loginForm)" class="css-form">

สิ่งนี้ทำให้แบบฟอร์มที่มีอยู่ในวิธีการควบคุม:

$scope.login = {
    submit : function(form) {
        if(form.$valid)....
    }

แบบฟอร์มของคุณจะถูกใส่ใน $ scope โดยอัตโนมัติเป็นวัตถุ มันสามารถเข้าถึงได้ผ่านทาง$scope[formName]

ด้านล่างเป็นตัวอย่างที่จะทำงานกับการตั้งค่าดั้งเดิมของคุณและไม่ต้องผ่านแบบฟอร์มตัวเองเป็นพารามิเตอร์ใน ng-submit

var controller = function($scope) {

    $scope.login = {
        submit: function() {
            if($scope.loginform.$invalid) return false;

        }
    }

};

ตัวอย่างการทำงาน: http://plnkr.co/edit/BEWnrP?p=preview

HTML:

<div class="control-group">
    <input class="btn" type="submit" value="Log in" ng-click="login.onSubmit($event)">
</div>

ในตัวควบคุมของคุณ:

$scope.login = {
    onSubmit: function(event) {
        if (dataIsntValid) {
            displayErrors();
            event.preventDefault();
        }
        else {
            submitData();
        }
    }
}

แม้ว่าไม่ใช่วิธีแก้ปัญหาโดยตรงสำหรับคำถาม OPs หากแบบฟอร์มของคุณอยู่ในng-appบริบท แต่คุณต้องการให้ Angular เพิกเฉยไปเลยคุณสามารถทำสิ่งนี้ได้อย่างชัดเจนโดยใช้ngNonBindableคำสั่ง:

<form ng-non-bindable>
  ...
</form>

เพียงเพิ่มคำตอบข้างต้น

ฉันมีปุ่มปกติ 2 ปุ่มดังแสดงด้านล่าง (ไม่มีประเภท = "ส่ง" ที่ใดก็ได้)

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>
<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

ไม่ว่าฉันจะพยายามมากแค่ไหนการกด Enter เมื่อแบบฟอร์มนั้นถูกต้องปุ่ม "Clear Form" ก็จะถูกเรียกใช้ซึ่งเป็นการล้างทั้งฟอร์ม

เป็นวิธีแก้ปัญหา

ฉันต้องเพิ่มปุ่มส่งจำลองซึ่งถูกปิดใช้งานและซ่อนอยู่ และปุ่มนี้หุ่นจะต้องมีด้านบนของทุกปุ่มอื่น ๆ ที่แสดงด้านล่าง

<button type="submit" ng-hide="true" ng-disabled="true">Dummy</button>

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>

<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

ความตั้งใจของฉันไม่เคยส่งที่ Enter ดังนั้นการแฮ็คที่ได้รับข้างต้นก็ใช้ได้ดี

ฉันรู้ว่านี่เป็นหัวข้อเก่า แต่ฉันคิดว่าฉันจะมีส่วนร่วมด้วย โซลูชันของฉันคล้ายกับโพสต์ที่ทำเครื่องหมายว่าเป็นคำตอบแล้ว การตรวจสอบ JavaScript แบบอินไลน์บางอย่างเป็นการหลอกลวง

ng-click="form.$invalid ? alert('Please correct the form') : saveTask(task)"

ฉันรู้ว่ามันมาช้าและได้รับคำตอบ แต่ฉันต้องการแบ่งปันสิ่งที่ฉันทำไว้ให้เรียบร้อย ฉันสร้างคำสั่งตรวจสอบความถูกต้อง ng ที่ขอ onsubmit ของแบบฟอร์มจากนั้นมันจะออกค่าเริ่มต้นการป้องกันถ้า $ eval เป็นเท็จ:

app.directive('ngValidate', function() {
  return function(scope, element, attrs) {
    if (!element.is('form'))
        throw new Error("ng-validate must be set on a form elment!");

    element.bind("submit", function(event) {
        if (!scope.$eval(attrs.ngValidate, {'$event': event}))
            event.preventDefault();
        if (!scope.$$phase)
            scope.$digest();            
    });
  };
});

ใน html ของคุณ:

<form name="offering" method="post" action="offer" ng-validate="<boolean expression">