Search code examples
angularjsformsmaterialize

Materializecss form with angularjs not submiting


I am using materializecss and my project uses angularjs as well.I have a form which looks like this.Both html and js are attached.The problem is that when i press submit no data is passed from the form.The relevant add function is called.In console it shows that the variable test is {} after stringify.I am not understanding why.Please help.Any help would be appreciated .(i have defined ng-app in the main file.Havent attached that here)

app.controller("MyAddController", function($scope, $http) {
	$scope.test = {};
    $scope.add = function() {
    	console.log("------------>"+JSON.stringify($scope.test));
    	$http({
    	    url: "rest/leave/create",
    	    method: "POST",
    	    data: JSON.stringify($scope.test),
    	    headers: {'Content-Type': 'application/json'}
        
        }).success(function(data, status, headers, config) {
            if (data) {
                $scope.data = data;
                alert("success");
            }
        }).error(function(data, status, headers, config) {
            alert("error");
        })
    }
});
  <!-- Modal Structure -->
  <div id="modal1" class="modal" ng-controller="MyAddController">
    <div class="modal-content">
      <h4>Apply Leave</h4>

      <div class="row">
        <form class="col s12">
          <div class="row modal-form-row">
            <div class="input-field col s6">
              <input id=num" type="text" class="validate" ng-bind="test.num">
              <label for="num">num</label>
            </div>
            
            <div class="input-field col s6">
              <input id="ename" type="text" class="validate" ng-bind="test.Title">
              <label for="ename">Employee Name</label>
            </div>
            
          </div>
          
           <div class="row modal-form-row">
            <div class="input-field col s5">
              <input id="startDate" type="text" class="validate" value="{{selectionDate.startdate}}" ng-bind="test.StartAt">
             
            </div>
            
            <div class="input-field col s5">
              <input id="endDate" type="text" class="validate" value="{{selectionDate.enddate}}" ng-bind="test.EndAt">
              
            </div>
            
            <div class="input-field col s2">
              <p>
      		  <input type="checkbox" id="test6" value="yes" ng-bind="isFull"/>
     		   <label for="test6">Half Day</label>
    			</p>
            </div>
            
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="description" type="text" class="validate" ng-bind="test.Description">
              <label for="description">Description</label>
            </div>
          </div>               
        </form>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn waves-effect waves-light" type="submit" ng-click="add()" name="action">Submit
    <i class="material-icons right">send</i>
  </button>
    </div>
  </div>
 


Solution

  • Change ng-bind to ng-model for two way data binding --- view to controller

    and you are also missing quotes in

      <input id=num" type="text" class="validate" ng-bind="test.num">
    

    Plunker