HTMLと角形の数字

Question

フォームタグ内にいくつかのフィールドがあり、フォームタグの外にボタンがあります。フォーム内のフィールドが空白の場合は、フォームを送信しないでください。このため、私はrequired属性を使用しましたが、サブミットボタンが<form>の外にあり、novalidate属性も使用していたので、機能しませんでした。何も動作していないようです。

FirstNameと MiddleName私のフォームを送信してはならないこれらのフィールドのいずれかを満たすことなく、他の多くの分野があるよう

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

は、誰もが私は、このための最善のアプローチを提案することができます：

以下は私のコードです。私angularControllerは次のとおりです。

(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

あなたは一般的にNG-無効このために、フォーム上の.$invalidフィールドを使用します。

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

angularjs docsを参照してください。