Html and angular js

Question

I have some fields inside a form tag and submit button outside a form tag. If any of the fields inside a form is empty my form should not be submitted. For this I used the required attribute but it was not working since submit button was outside of the <form> and also used novalidate attribute. Nothing seems to work.

Below is my code:

<section id="profile" class="content-header">
  <div class="thumbnail">
    <button type="submit" class="btn btn-block btn-success" ng-if="!viewProfile" ng-click="updateProfile();">SUBMIT</button>
  </div>
  <div class="row">
    <form name="profileForm" role="form">
      <div class="form-group col-md-6">
        <label for="firstName"> First Name </label>
        <input type="text" class="form-control" id="firstName" ng- model="profileDetails.firstName" ng-disabled="viewProfile" required/>
      </div>
      <div class="form-group col-md-6" ng-if="userDetails.role==0">
        <label for="firstName"> Middle Name </label>
        <input type="text" class="form-control" id="middleName" ng- model="profileDetails.middleName" ng-disabled="viewProfile" />
      </div>
    </form>
  </div>
</section>

like FirstName and MiddleName there are many other fields without filling any of those fields my form should not be submitted, can anyone suggest me the best approach for this. My angularController is:

(function() {
  function profileController($scope, profileFactory, $loading) {
    $scope.updateProfile = function() {
      $loading.start("main");
      profileFactory
        .updateProfile($scope.profileDetails)
        .then(function(response) {
          var updatedUserDetails = response.user;
          if (updatedUserDetails.imagePath !== null) {
            $scope.profileDetails.imagePath = updatedUserDetails.imagePath;
            $scope.profileDetails.profieImageBytes = updatedUserDetails.profieImageBytes;
          }
          angular.extend($scope.userDetails, $scope.profileDetails);
          $scope.editProfile();
        })
        .catch(function() {
          $loading.finish("main");
        });
    };
    $loading.finish("main");
  }
  profileController.$inject = ["$scope", "profileFactory", "$loading"];
  angular
    .module("vResume.profile")
    .controller("profileController", profileController);
})();

You can submit the form via JavaScript in your `updateProfile()` function. See this question: https://stackoverflow.com/questions/9855656/how-to-submit-a-form-using-javascript — mrogers, Nov 03 '17 at 13:43
In our application we were not using JavaScript,its totally based on Angular-mrogers — vyas, Nov 03 '17 at 13:49
@vyas Angular is a framework/library built on JavaScript. All the code you write in your controllers is JavaScript. — mrogers, Nov 03 '17 at 13:50
yaa i mean to say we are not using plain javaScript rather we are using AngularJS i posted my js snippet also-mrogers — vyas, Nov 03 '17 at 13:58

score 1 · Accepted Answer · answered Nov 03 '17 at 13:52

1

You typically use the .$invalid field on the form with ng-disabled for this.

<button type="submit" class="btn btn-block btn-success" ng-disabled="profileForm.$invalid" ng-if="!viewProfile" ng-click="updateProfile();">SUBMIT</button>

See the angularjs docs.

answered Nov 03 '17 at 13:52

Seth Flowers

8,990
2
29
42

yaa already tried that,it was not working even if i doesnt give all the fields,form is being submitted – vyas Nov 03 '17 at 13:59
Then you have something else going on, because that is almost the main use for form.$invalid. Add a minimal plunkr, jsbin, jsfiddle, etc. – Seth Flowers Nov 03 '17 at 14:05
try just getting rid of type="submit" from the button. – Seth Flowers Nov 03 '17 at 14:06
yaa thanks for your contribution,it was working now i just made a mistake since i didnt worked now it was working fine,tahnk you -seth flowers – vyas Nov 03 '17 at 14:11

Html and angular js

1 Answers1