Ngưỡng mắt: Xác thực trên biểu mẫu gửi

Question

trong số plunk có biểu mẫu có xác thực ngMessage. Đây là những gì tôi đang cố gắng để đạt được:

• Khi mẫu được hiển thị cho người sử dụng, không có thông báo lỗi sẽ được hiển thị
• On mờ, nếu trường có sai sót, thông báo sẽ được hiển thị
• Khi biểu mẫu được gửi, nếu có bất kỳ trường nào có lỗi, thì thông báo lỗi sẽ được hiển thị.

Trong thư tôi có hai vấn đề: (1) thông báo được hiển thị khi biểu mẫu được hiển thị ban đầu và (2) khi không có thông báo lỗi và người dùng nhấp vào nút, biểu mẫu không được gửi. Có gì sai với mã?

HTML

<form name="myForm" novalidate> 
    <label> 
    Enter your name: 
    <input type="text" 
      name="myName" 
      ng-model="name" 
      ng-minlength="5" 
      ng-maxlength="20" 
      required /> 
    </label> 

    <div ng-messages="myForm.myName.$error" style="color:red" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
    </div> 

    <button type="submit" 
    ng-submit="myForm.$valid && submitForm()">Submit</button> 
</form> 

Javascript

var app = angular.module('ngMessagesExample', ['ngMessages']); 
app.controller('nameController', function ($scope) { 

    $scope.submitForm = function() { 
    alert('Form submitted - fields passed validation'); 

    };  
}); 

Answer 1

Bạn cần phải hiển thị thông báo xác nhận sử dụng điều kiện như ví dụ ng-nếu

HTML:

<div ng-if="submitted || myForm.myName.$dirty" 
    ng-messages="myForm.myName.$error" style="color:red" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
</div> 

Javascript:

$scope.submitForm = function() { 
    $scope.submitted = true; 
    if (myForm.$valid) { 
     alert('Form submitted - fields passed validation'); 
    } 
}; 

và di chuyển ng-trình từ nút để tạo thẻ như:

<form name="myForm" novalidate ng-submit="submitForm()"> 

Answer 2

Dựa trên anwser Kwarc của, ở đây là một cải tiến nhỏ vì bạn có thể tránh sử dụng biến số $scope để biết liệu biểu mẫu của bạn có được gửi hay không. Nó cũng đảm bảo một hành vi tốt hơn về hiển thị thông báo lỗi.

HTML:

<div ng-if="myForm.myName.$invalid && (myForm.$submitted || myForm.myName.$touched)" 
    ng-messages="myForm.myName.$error" style="color:red" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
</div> 

Javascript:

$scope.submitForm = function() { 
    if (myForm.$valid) { 
     alert('Form submitted - fields passed validation'); 
    } 
}; 

myForm.$submitted sẽ được tự động thiết lập là true

và cuối cùng, áp dụng các hình thức tương tự nộp phương pháp vào mẫu tag:

<form name="myForm" novalidate ng-submit="submitForm()"> 

Answer 3

Đối với tôi nó chỉ đơn giản là đủ để sử dụng trong các ng-nếu $ nộp nhà nước có dạng (ví dụ là barebones):

// and in the submit btn 
 

 
scope.submit = function() { 
 
    scope.myForm.$setSubmitted(); 
 
    if (scope.myForm.$valid) { 
 
    // do something 
 
    } 
 
}

<div ng-if="myForm.$submitted || myForm.attr.$touched" ng-messages="myForm.attr.error"> 
 
    <!-- messages with ngMessages --> 
 
</div>