Materializecss form with angularjs not submiting - angularjs

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>

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

Related

How to post an image with other data in the json file using angularjs form

I'm trying to create multiple form under tabs with previous tab data been used in the next tab and each form has a save button which saves the data for the next tab using angularjs. Everything is working fine with code. All of the form data is added to single field in the model which is a JSONField. Except I have a form which has a file field usually images I am stuck with the upload of these images to the json field.
var app = angular.module('app', []);
app.controller('enviromentController', function ($scope, $http) {
$scope.saveEnvironment = function () {
$http({
method: 'PUT',
"url": "{% url 'core:api:edit-environement' env_id=env_id %}",
"data": angular.copy($scope.env),
"headers": {
"accept": "application/json",
"content-type": "application/json",
"Authorization": "Token " + localStorage.getItem('token')
}
}).then(function () {
inform("Saved", "Published data");
});
this is my form
<div class="tab-content" id="myTabContent" style="min-height:375px">
<div class="tab-pane active" id="environment" role="tabpanel" aria-labelledby="environment-tab">
<div class="form-group col-lg-5">
<label class="form-control-label">Title </label>
<input type="text" class="form-control" ng-model="env.title" required />
</div>
<div class="form-group col-lg-5">
<label class="form-control-label">Department</label>
<select class="form-control" ng-model="env.department"
ng-options="c.id as c.name for c in departments" required>
</select>
</div>
<div class="form-group col-lg-5">
<label class="form-control-label" for="appname">App Name</label>
<select class="form-control" ng-model="env.app_name"
ng-options="c.id as c.name for c in app_name" required>
</select>
</div>
</div>
<div class="tab-pane" id="room" role="tabpanel" aria-labelledby="room-tab">
<div class="row">
<div class="form-group col-lg-4">
<label class="form-control-label">Name</label>
<input type="text" class="form-control" ng-model="env.json_data1.room.name" />
</div>
<div class="form-group col-lg-4">
<label class="form-control-label">Height </label>
<input type="text" class="form-control" ng-model="env.json_data1.room.height" />
</div>
<div class="form-group col-lg-4">
<label class="form-control-label">Width </label>
<input type="text" class="form-control" ng-model="env.json_data1.room.width" />
</div>
<div class="form-group col-lg-5">
<label class="form-control-label">Length </label>
<input type="text" class="form-control" ng-model="env.json_data1.room.length" />
</div>
<div class="form-group col-lg-5">
<label class="form-control-label">Texture </label>
<input type="text" class="form-control" ng-model="env.json_data1.room.texture" />
</div>
<div class="form-group col-lg-5">
<label class="form-control-label">Room Image </label>
<input type="file" class="dropify"
file-model="env.json_data1.room.room_floorplan" accept="image/*" />
</div>
<div class="form-group col-lg-5">
<label class="form-control-label">Floorplan </label>
<input type="file" class="dropify"
accept="image/*" />
</div>
<div class="form-group col-lg-2 p-4">
<label class="form-control-label"> </label>
<button type="button" ng-click="addRoom(env.json_data1.room)"
class="btn btn-primary">{{env.json_data1.room.stage||'Add'}}</button>
</div>
<table class="table">
<tr>
<th>Name</th>
<th>Texture</th>
<th>Size</th>
<th>Actions</th>
</tr>
<tr ng-repeat="room in env.json_data1.rooms">
<td>{{room.name}}</td>
<td>{{room.texture}}</td>
<td>{{room.height}} x {{room.width}} x {{room.length}}</td>
<th><button type="button" ng-click="editRoom(room)">Edit</button></th>
</tr>
</table>
</div>
</div>
$scope.addRoom = function (rec) {
if (!rec.stage) {
rec.stage = 'Update';
$scope.env.json_data1.rooms.push(rec);
}
$scope.env.json_data1.room = {};
}

null value passed from angularjs frontend to jersey backend

i am using angular front end and java jersey as back end .when i submit data from the form ,null values are passed instead of the actual form data. This is my form
<div id="main">
<h1>Create Leave</h1>
<form class="form-horizontal" >
<div class="form-group">
<label for="employeeName" class="col-sm-3 control-label">Employee Name</label>
<div class="col-sm-6">
<input type="text" id="num" class="form-control" ng-model="num" />
</div>
<div class="col-sm-3"></div>
</div>
<div class="form-group">
<label for="leaveType" class="col-sm-3 control-label">Leave Type</label>
<div class="col-sm-2">
<select id="leaveType" class="form-control" ng-model="leaveType">
<option value="hospital">Hospital</option>
<option value="l1">leave type 2</option>
<option value="l2">leave type 3</option>
<option value="l3">leave type 4</option>
<option value="l4">leave type 5</option>
<option value="l5">leave type 6</option>
</select>
</div>
<div class="col-sm-7"></div>
</div>
<div class="form-group">
<label for="leaveStartDate" class="col-sm-3 control-label">Leave Start Date</label>
<div class="col-sm-2">
<input type="date" id="startDate" class="form-control" ng-model="startDate" />
</div>
<div class="col-sm-7"></div>
</div>
<div class="form-group">
<label for="leaveEndDate" class="col-sm-3 control-label">Leave End Date</label>
<div class="col-sm-2">
<input type="date" id="endDate" class="form-control" ng-model="endDate" />
</div>
<div class="col-sm-7"></div>
</div>
<div class="form-group">
<div class="col-sm-3"></div>
<div class="col-sm-2">
<span><b>Is Half Day leave</b></span>
<div class="radio">
<label><input value="Yes" type="radio" name="halfDay" ng-model="isHalfDay" />Yes</label>
</div>
<div class="radio">
<label><input value="No" type="radio" name="halfDay" ng-model="isHalfDay" />No</label>
</div>
</div>
</div>
<button ng-click="add()" class="btn btn-primary">Submit</button>
<button ng-click="resetForm()" class="btn">Reset</button>
</form>
and this is the controller
app.controller("MyAddController", function($scope, $http) {
//$scope.test = {};
$scope.add = function() {
// console.log("------------>"+JSON.stringify($scope.test));
$http.post("webapi/blog/create", {
params: {
signum: $scope.num,
leaveType: $scope.leaveType,
startDate: $scope.startDate,
endDate: $scope.endDate,
isHalfDay: $scope.isHalfDay
}
}).success(function(data, status, headers, config) {
if (data) {
$scope.data = data;
alert("success");
}
}).error(function(data, status, headers, config) {
alert("error");
})
}
});
and the jersey code
#POST
#Path("create")
#Produces({ "application/json" })
public String create(#BeanParam LeaveDetails ld) {
System.out.println("Entered here");
System.out.println(ld.getIsHalfDay());
System.out.println(ld.getNum());
System.out.println(ld.getEndDate());
System.out.println(ld.getStartdate());
System.out.println(ld.getLeaveType());
new AddLeaveDao().addDetails(ld);
System.out.println("Returned here");
return "{}";
}
Please help

Recaptcha cant get response in angular after changing page

I have a problem with my angular application. I have a register page on my site. Normally when I get straight to the register page it works fine, after submitting the form is sent and user is registered. Problem appears when I for example load register page then go to login page and then again to register. In this case the form is not sent to server.
I tried to figure it out and even to repair by refreshing page after clicking register link but it didn't help.
I debug my application a little and found that it's recaptcha causing my problem. I use angular-recaptcha version 2.2.5; Tried to log the output of vcRecaptchaService.getResponse() but nothing showed in console.
Here is some code, where the problem may lay:
Request of form
$scope.registerRequest = (form) => {
$scope.$broadcast('show-errors-check-validity');
if (!form.$valid) {
return;
}
$scope.isLoading = true;
$scope.formData.reCaptcha = vcRecaptchaService.getResponse();
apiRequest.post('user/register', $scope.formData).success((response) => {
$scope.isLoading = false;
$scope.registered = true;
$scope.formData = {};
});
};
Routes:
app.config(['$routeProvider', ($routeProvider) => {
$routeProvider
.when('/auth/login', {
controller: 'authLogin',
label: 'Logowanie',
templateUrl: 'app/components/authLoginView.html',
access: ['UNAUTH']
})
.when('/auth/register/', {
controller: 'authRegister',
label: 'Rejestracja',
templateUrl: 'app/components/authRegisterView.html',
access: ['UNAUTH']
})
.when('/auth/register/confirm', {
controller: 'authRegister',
label: 'Potwierdzenie rejestracji',
templateUrl: 'app/components/authRegisterView.html',
access: ['UNAUTH']
})
.when('/auth/register/resend', {
controller: 'authRegister',
label: 'Rejestracja',
templateUrl: 'app/components/authRegisterView.html',
access: ['UNAUTH']
})
}]);
And some HTML:
<div ng-if="section == 'register'" class="container employer-container">
<form name="registerForm" class="form-horizontal col-sm-6 col-sm-offset-3" loader is-loading="isLoading">
<h4 class="employer-h4">Rejestracja</h4>
<p class="bg-success text-success col-xs-12" ng-show="registered">
Użytkownik został zarejestrowany. Na podany adres e-mail wysłaliśmy dalsze instrukcje.
</p>
<div ng-hide="registered">
<div class="form-group" show-errors>
<label for="email" class="col-md-3 control-label">E-mail:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="email" placeholder="E-mail"
ng-model="formData.email" name="username"
ng-required="true">
</div>
</div>
<div class="form-group" show-errors>
<label for="password" class="col-md-3 control-label">Hasło:</label>
<div class="col-md-9">
<input type="password" class="form-control" id="password" placeholder="Hasło"
ng-model="formData.password" name="password" ng-minlength="5"
ng-required="true" equals="{{ formData.confirmPassword }}">
</div>
</div>
<div class="form-group" show-errors>
<label for="confirmPassword" class="col-md-3 control-label">Powtórz hasło:</label>
<div class="col-md-9">
<input type="password" class="form-control" id="confirmPassword" placeholder="Powtórz hasło"
ng-model="formData.confirmPassword" name="confirmPassword" ng-minlength="5"
ng-required="true" equals="{{ formData.password }}">
</div>
</div>
<div class="form-group" show-errors>
<label class="col-md-3 control-label" for="userType">Rodzaj konta:</label>
<div class="col-md-9">
<div class="btn-group" dropdown>
<button type="button" class="btn btn-default dropdown-toggle form-control"
id="userType" name="userType" dropdown-toggle ng-model="formData.userType"
ng-required="true">
{{ userTypes[formData.userType] || 'rodzaj konta' }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="(key, userType) in userTypes">
{{ ::userType }}
</li>
</ul>
</div>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-md-3"></div>
<div class="col-md-9">
<input class="form-control" type="checkbox" id="acceptTerms" ng-model="formData.acceptedTerms" name="acceptTerms" ng-required="true">
<label class="control-label" style="text-align: left;" for="acceptTerms">Zgadzam się z  Regulaminem</label>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-md-3"></div>
<div class="col-md-9">
<input class="form-control" type="checkbox" id="acceptTerms2" ng-model="formData.acceptedTerms2" name="acceptTerms2" ng-required="true">
<label class="control-label" style="text-align: left;" for="acceptTerms2">Wyrażam zgodę na przetwarzanie moich danych w celu realizacji usług w ramach Serwisu i akceptuję Politykę Prywatności..</label>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-md-3"></div>
<div class="col-md-9">
<input class="form-control" type="checkbox" id="acceptTerms3" ng-model="formData.acceptedTerms3" name="acceptTerms3" ng-required="true">
<label class="control-label" style="text-align: left;" for="acceptTerms3">Wyrażam zgodę na przetwarzanie moich danych w celach marketingowych.</label>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<div vc-recaptcha key="'key'"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
Zapomniane hasło |
Logowanie
</div>
<div class="col-md-3 text-right">
<button type="submit" class="btn btn-info" ng-click="registerRequest(registerForm)">Zarejestruj</button>
</div>
</div>
</div>
</form>
</div>
Problem could be seen here: http://pze2.biuro.netivo.pl/
Answering to one of questions about ['UNAUTH'] in my routes. It is for allowing only users who are not logged in to enter this page.
Thanks to Vinny I managed to solve the problem.
The problem lies as he said in reCaptcha.getResponse() not getting right widget.
For those who will have same problem I put the solution in my code:
Request:
$scope.registerRequest = (form) => {
$scope.$broadcast('show-errors-check-validity');
if (!form.$valid) {
return;
}
$scope.isLoading = true;
apiRequest.post('user/register', $scope.formData).success((response) => {
$scope.isLoading = false;
$scope.registered = true;
$scope.formData = {};
});
};
HTML:
<div ng-if="section == 'register'" class="container employer-container">
<form name="registerForm" class="form-horizontal col-sm-6 col-sm-offset-3" loader is-loading="isLoading">
<h4 class="employer-h4">Rejestracja</h4>
<p class="bg-success text-success col-xs-12" ng-show="registered">
Użytkownik został zarejestrowany. Na podany adres e-mail wysłaliśmy dalsze instrukcje.
</p>
<div ng-hide="registered">
...
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<div vc-recaptcha ng-model="formData.reCaptcha" key="'key'"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
Zapomniane hasło |
Logowanie
</div>
<div class="col-md-3 text-right">
<button type="submit" class="btn btn-info" ng-click="registerRequest(registerForm)">Zarejestruj</button>
</div>
</div>
</div>
</form>
</div>

Angular and Bootstrap radio buttons conflict When Editing Form

I am unable to get automatic radio button checked when I edit the User From using following Html and AngularJs Code. When I console {{changeUser}} this returns following data
{"id":1,"username":"Ramesh","password":"Ramesh1#23","role":"admin","active":"no"}. When I load the edit form I have to automatically checked the no radio button in the following code.
<div class="portlet-body form">
<!-- BEGIN FORM-->
<form class="form-horizontal form-bordered" name="editUserForm" data-ng-submit="userEdit(changeUser)">
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Username*</label>
<div class="col-md-4">
<input class="form-control" type="text" name="userName" data-ng-model="changeUser.username" value="{{ changeUser.username }}" data-ng-pattern="/^[a-z0-9_ .-]{5,15}$/i" required />
<span style="color:red" class="error" data-ng-show="editUserForm.userName.$error.pattern" >Only letters, integers, and underscores.Minimum 5 characters to maximum 15 characters.</span>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Password*</label>
<div class="col-md-4">
<input class="form-control" type="password" name="changePassword" data-ng-model="changeUser.password" value="{{ changeUser.password}}" data-ng-pattern="usersPattern.password" required />
<span style="color:red" class="error" data-ng-show="editUserForm.changePassword.$error.pattern">Minimum of 8 characters, 1 capital letter,1 lowercase, 1 special-case and 1 numeric.</span>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Action</label>
<div class="col-md-4">
<div class="radio-list">
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changeUser.active" value="yes"/>
Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios2" data-ng-model="changerUser.active" value="no"/>
No
</label>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn purple" data-ng-disabled= "editUserForm.$invalid">
<i class="fa fa-check"></i> Edit</button>
<button type="button" class="btn red" data-ng-click="cancelEdit()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
</div>
The Controller is
(function (){
"use strict";
function UsersEditController($scope, UserFactory, $http, $location) {
$scope.$on('$viewContentLoaded', function () {
App.initAjax(); // initialize core components
});
$scope.changeUser = {};
$scope.changeUser = UserFactory.get();
$scope.userEdit = function(data) {
$scope.changeUser = data;
console.log($scope.changeUser);
};
$scope.usersPattern = {
password: '((?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!##$%]).{8,20})'
};
$scope.cancelEdit = function() {
$location.path('users');
};
}
UsersEditController.$inject = ['$scope', 'UserFactory', '$http', '$location'];
angular.module('books').controller('UsersEditController', UsersEditController);
})()
And I guess this is your answer (even without js code provided :) )
https://stackoverflow.com/a/18446612/552194
You need to add ng-value and use it instead of the standard value

Angular Expression Conflicts with ng-model

I have a modal:
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%#taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" name="brandid" value="{{item.brandid}}"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" value="{{item.name}}" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
and its modal controller:
app.controller("BrandCtrl", function ($scope, $http, $modal) {
$scope.animationsEnabled = true;
$scope.open = function (id) {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: '/admin.brands/edit',
controller:gg,
resolve: {
item: function($http) {
return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
.then(function(response) {
return response.data;
});
}
}
});
}
});
var gg = function ($scope, $modalInstance, $http, item) {
$scope.item = item;
$scope.ok = function () {
$http.post('/admin.brands/updateBrandAndGetJSON', {id:$scope.brandid, name:$scope.brandname, isactive:$scope.isactive}).
success(function(data, status, headers, config) {}).
error(function(data, status, headers, config) {});
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss();
};
}
This way I can't get the input values in $http.post in $scope.ok function so I tried add ng-models to form fields in modal
<%#taglib tagdir="/WEB-INF/tags" prefix="tags"%>
<%#taglib uri="/WEB-INF/tlds/fields.tld" prefix="fields"%>
<div class="row-fluid sortable">
<div class="box span12">
<div class="box-content">
<form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post">
<fields:form formName="brand.id.form">
<input type="hidden" ng-model="item.brandid" name="brandid"/>
</fields:form>
<fields:form formName="brand.form">
<div class="section-heading"></div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="name"/> *</label>
<div class="controls">
<input name="name" ng-model="item.name" required/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
<div class="controls">
<input type="checkbox" ng-model="item.isactive" ng-checked="item.isactive" name="isactive" value="1"/>
</div>
</div>
</fields:form>
<div class="form-actions">
<a ng-click="cancel()" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
<a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></a>
</div>
</form>
</div>
</div>
</div>
but now, I can't load values from modal controller to input fields.
ng-model and expression conflicted.
How can I load values from modal controller and get it in ok function ?
Try this,
Remove expressions used
In the controller, after setting $scope.item initiate brandid as $scope.brandid=angular.copy($scope.item.brandid);
Likewise for other fields.
OR
In your current approach you can try giving $scope.$apply() after setting $scope.item; This is an indirect approach. No need to do like this.

Resources