AngularJS点击提交按钮后验证信息不显示问题求助

Hey there! Let's get your form validation messages showing up when you hit that submit button. Looking at your controller code, you're already setting $scope.submitDetail = true on submission—great start! The missing piece is probably in your HTML template where you haven't tied this flag to your validation message visibility.

Here's what's likely going wrong: #

You've got the controller logic to track submission state, but your validation messages aren't set to appear only after submission (when submitDetail is true) AND when the input is invalid. AngularJS relies on form/control states (like $invalid, $error.required) combined with your submission flag to trigger these messages.

Step-by-Step Solution #

1. First, confirm your controller code is solid (yours looks good, let's recap):

var app = angular.module("demoApp", []); 
app.controller("demoController", function($scope) { 
  $scope.submitDetail = false; 
  $scope.submitForm = function(isValid) { 
    $scope.submitDetail = true; 
    if (isValid) { 
      alert('Form is valid! Submitting...'); 
    } 
  } 
});

2. Update your HTML template to link validation messages to the submission flag:

You need to:

• Give your form a name attribute (so AngularJS can track its state)
• Add name attributes to each input you want to validate
• Use ng-show (or ng-if) on your validation messages to check both the submission flag and the input's invalid state

Example template:

<div ng-app="demoApp" ng-controller="demoController">
  <form name="demoForm" ng-submit="submitForm(demoForm.$valid)" novalidate>
    <!-- Name Field -->
    <div class="form-group">
      <label>Full Name:</label>
      <input type="text" name="fullName" ng-model="user.fullName" required>
      <!-- Validation message: Show only after submission AND field is invalid -->
      <span style="color: red;" ng-show="submitDetail && demoForm.fullName.$invalid">
        <span ng-show="demoForm.fullName.$error.required">Name is required!</span>
      </span>
    </div>

    <!-- Email Field -->
    <div class="form-group">
      <label>Email:</label>
      <input type="email" name="email" ng-model="user.email" required>
      <span style="color: red;" ng-show="submitDetail && demoForm.email.$invalid">
        <span ng-show="demoForm.email.$error.required">Email is required!</span>
        <span ng-show="demoForm.email.$error.email">Please enter a valid email address!</span>
      </span>
    </div>

    <button type="submit">Submit Form</button>
  </form>
</div>

Key Points to Note: #

• novalidate on the form disables browser native validation, letting AngularJS handle it instead.
• demoForm.fullName.$invalid checks if the name field fails any validation rules (in this case, required).
• submitDetail && demoForm.fullName.$invalid ensures the message only appears after the user has tried to submit and the field is invalid—no premature validation messages!
• For specific errors (like invalid email), use demoForm.email.$error.email to target exact issues.

Why This Works: #

When you click submit, $scope.submitDetail becomes true, which unlocks all the validation messages. AngularJS then checks each input's state and shows the relevant messages for any invalid fields. If the form is valid (isValid is true), your alert will fire as expected.

Give this setup a try—your validation messages should now pop up exactly when you need them after submission!

内容的提问来源于stack exchange，提问作者Kapil Soni