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);
})();

Answer 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.