I have two forms in two different modals. When I open the first modal, I console.log the form which I've attached to $scope (I mean n the controller I've given $scope.updateSecurityForm = {} in the beginning) and given name="updateSecurityForm" and I see all the properties like $valid etc. I
When I open the second modal and again console.log the first modal's form, the object is empty. Then I close the second modal and then open the first modal again and see in the console, I see an empty object again. I expected to see the form properties, but there was only an empty object.
The first form in modal:
<div class="modal-body">
<form name="updateSecurityForm" ng-submit="updatePersonnels(upObj, updateSecurityForm)" ng-repeat="upObj in personnelProfileData" novalidate>
<div class="col-md-4">
<label for="vendor-name" class="control-label">Vendor Name:</label>
<select name="vendorname" ng-model="upObj.vendor_id" class=" text-center form-control" ng-options="data.vendor_id as data.vendor_name for data in getvendetailsdata">
{{data.vendor_name}}
</select>
</div>
</form>
</div>
The second modal:
<div class="modal-body">
<form name="addPlumberForm" ng-submit="addPersonnelsByRole(addObj,8, addPlumberForm)" novalidate>
<div class="col-md-4">
<div class="form-group">
<label for="message-text" class="control-label">
Name of the vendor:<span style="color: red;">*</span>
</label>
<select class="text-center form-control ng-valid ng-empty ng-dirty ng-touched" name="vendorname" ng-model="addObj.vendor_id">
<option value="" selected="selected">- Please select a vendor name -
</option>
<option ng-repeat="ae in getvendetailsdata" value="{{ae.vendor_id}}" class="ng-binding ng-scope">{{ae.vendor_name}}</option>
</select>
</div>
</form>
</div>
</div>
Both the modals are in the same page and they are mostly similar. I used the same names in the form so that it will be easy to validate.
In my controller, in the beginning I have
$scope.updateSecurityForm = {} and $scope.addPlumberForm = {} if that matters to anyone reading.
When I do the validation, I get Cannot read property '$invalid' of undefined when I do
$scope.addPersonnelValidation = function(formName) {
console.log(formName, "formName");
if (formName.vendorname.$invalid) {
$.bootstrapGrowl('Please select vendor name', {
type: 'danger',
delay: 2000,
});
return;
}
Calling the validate function:
$scope.addPersonnelsByRole = function(addObj, user_role_type_id, formName) {
if ($scope.addPersonnelValidation(formName)) {
//valid form
}
}
I have put together all your code in jsfiddle and it is not giving undefined error. Though there were few corrections that would be needed for your validation to work.
I have provided the jsfiddle link at the end. Let me know if this is helpful
required attribute is missing in your select of second modal.
closing div missing in the second modal above form tag.
<div class="modal-body">
<form name="addPlumberForm" ng-submit="addPersonnelsByRole(addObj,8, addPlumberForm)" novalidate>
<div class="col-md-4">
<div class="form-group">
<label for="message-text" class="control-label">Name
of the vendor:<span style="color: red;">*</span>
</label>
<select
class="text-center form-control ng-valid ng-empty ng-dirty ng-touched"
name="vendorname" ng-model="addObj.vendor_id" required>
<option value="" selected="selected">- Please
select a vendor name -
</option>
<option ng-repeat="ae in getvendetailsdata"
value="{{ae.vendor_id}}" class="ng-binding ng-scope">{{ae.vendor_name}}</option>
</select>
</div>
<input type="submit">
</div>
</form>
</div>
jsfiddle link : https://jsfiddle.net/anilsarkar/txbmg2wy/3/
Related
I need to know if the field of the spring form is disabled or not. What will I do to do this?
var isDisabled = $('#dateUsed').prop('disabled');
var isDisabled = document.getElementById('dateUsed').disabled;
I tried these codes to check if it's disabled but it returns false even though it is disabled.
Code:
The field:
<div class="row">
<div class="col-md-4">
<div class="form-group">
<form:label path="materialUsed.dateUsed">Date Used</form:label> <star id="dateUsedStar" class="hidden" >*</star>
<form:input path="materialUsed.dateUsed" type="text" class="form-control datetimepicker" id="dateUsed" disabled="true"/>
</div>
</div>
</div>
In my Javascript:
var isDisabled = $('#dateUsed').prop('disabled');
var isDisabled = document.getElementById('dateUsed').disabled;
alert(isDisabled);
I expect the output to be true since it is disabled in the form.
You can test this my using the "is" method ; which will return a boolean
$('#dateUsed').is(':disabled');
console.log($('#dateUsed').is(':disabled')) // True
On a personal Note its rather better to use readonly="true" in your form fields
rather than the disabled property.
I'm not familiar with the format of the HTML you are using.
<form:label path="materialUsed.dateUsed">Date Used</form:label> <star id="dateUsedStar" class="hidden" >*</star>
<form:input path="materialUsed.dateUsed" type="text" class="form-control datetimepicker" id="dateUsed" disabled="true"/>
I don't think this is valid HTML.
Try this HTML
<div class="row">
<div class="col-md-4">
<form>
<div class="form-group">
<label path="materialUsed.dateUsed">Date Used</label> <star id="dateUsedStar" class="hidden" >*</star>
<input path="materialUsed.dateUsed" type="text" class="form-control datetimepicker" id="dateUsed" disabled="true"/>
</div>
</form>
</div>
JQuery
$(document).ready(function(){
var isDisabled = $('#dateUsed').prop('disabled');
alert(isDisabled);
});
Here is a demonstration
https://jsfiddle.net/markou/mo7r5anq/8/
This works, and you get true.
If you replace this HTML with the HTML you have above will get undefined.
Being directly, I'm working on a project that have a filter button, but one of the requirements is to keep the parameters from the filter forms if the user refreshs the page.
The problem is: When I refresh the page with values into the form, just the DATE input resets
I have three forms, and the last is a Date. I managed to make it work for the first two with jQuery but with the date field it just does not work ...
Does anyone know how to solve it? thank you!
$(document).ready(function() {
if (document.getElementById("car_result"))
document.getElementById("car_result").value = localStorage.getItem("item_result");
if (document.getElementById("car_action"))
document.getElementById("car_action").value = localStorage.getItem("item_action");
if (document.getElementById("dei"))
document.getElementById("dei").value = localStorage.getItem("item_dei");
});
$(window).on('beforeunload', function() {
localStorage.setItem("item_result", document.getElementById("car_result").value);
localStorage.setItem("item_action", document.getElementById("car_action").value);
localStorage.setItem("item_dei", document.getElementById("dei").value);
});
<div class="container-fuid">
<div class="row col-sm-12">
<div class="col-sm-6">
<form class="form text-center" id="form1">
Result: <input id="car_result" type="text" class="form-control"><br>
Last name: <input id="car_action" type="text" class="form-control">
<input placeholder="Initial date" class="textbox-n form-control borderform" type="text" onfocus="(this.type='date')" name="dei" id="dei" /><br><br>
<button>Filter</button>
</form>
</div>
</div>
</div>
Requirement : selection of radio buttons should bring their respective input boxes.
Below is the part of my html and controller. I am using ng-change to invoke the function written in controller. The function in controller just shows the div using jquery.
fyi, My template is rendering and I don't see any error on console and functions in controller are getting invoked too.
Issue - On the click on radio button, respective div is is not rendering.
Any hints are highly appreciated.
<div ng-app="app" ng-controller="FestCtrl">
<form name="addForm" class="form-horizontal" ng-submit="submitForm(fest)">
<!-- Options to user to either enter a new role OR select from an existing one's -->
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="option1" autocomplete="off" ng-model="value" ng-change="newfest()"> New
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off" ng-model="value" ng-change="existingfest()"> Existing
</label>
</div>
<br>
<br>
<!-- Respective input will be presented depending on above selection-->
<div id="addNewDiv" class="form-group">
<label class="control-label" for="InputId">New</label>
<input required type="text" class="form-control" id="groupIdInput" placeholder="Insert new fest" ng-model="fest.role">
</div>
<div id="selectExistingDiv" class="form-group">
<label for="select1">Select</label>
<select ng-model="fest.role" class="form-control" id="select1" ng-options="val for val in festArray">
<option value="">Select</option>
</select>
</div>
</form>
</div>
var app = angular.module('App');
app.controller('FestCtrl', ['$scope', '$state', function($scope, $state) {
$(function() {
$("[data-hide]").on("click", function() {
$(this).closest("." + $(this).attr("data-hide")).hide();
});
});
$("#addNewDiv").hide();
$("#selectExistingDiv").hide();
$scope.newRole = function() {
$("#addNewDiv").show();
}
$scope.existingRole = function() {
$("#selectExistingDiv").show();
}
}]);
One of the key problems you're facing in this case is a result of your use of jQuery in combination with Angular. Among other problematic areas, (which are discussed in this question Is that a good practice to use jQuery with AngularJS?) you are interacting with a polluted global scope by referencing the $. Angular uses a lot of $ prefixed methods in it's namespace.
Inside your angular controller, you won't even have a reference to the Window object which is what jQuery attaches it's namespace ($) to. In Angular, if you need a reference to the window object, you can use the $window provider https://docs.angularjs.org/api/ng/service/$window.
Lastly on the subject of using jQuery in combination with angular, there are certainly instances where you need to touch the DOM. Angular's paradigm for handling this is called directives. Directives aren't incredibly easy to understand, and are out of scope of this answer, but I encourage you to read more about them here -> https://docs.angularjs.org/guide/directive.
Here's a working example of how this could work.
function FestController($scope) {
$scope.state = {
selected: 0,
fest: {
role: ""
}
};
}
angular.module("bacon", []);
angular.module("bacon").controller("FestController", FestController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="bacon" ng-controller="FestController">
{{state.selected}}
<input type="number" ng-model="state.selected" />
<form class="form-horizontal" id="addForm" name="addForm" ng-submit="submitForm(fest)">
<!-- Options to user to either enter a new role OR select from an existing one's -->
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input autocomplete="off" id="option1" name="options" ng-model="state.selected" ng-value="0" type="radio"> New</label>
<label class="btn btn-primary">
<input autocomplete="off" id="option2" name="options" ng-model="state.selected" ng-value="1" type="radio"> Existing</label>
</div>
<!-- Respective input will be presented depending on above selection-->
<div class="animate-switch-container" ng-switch="state.selected">
<div class="form-group" id="addNewDiv" ng-switch-when="0">
<h1>
{{state.fest.role}}
</h1>
<label class="control-label" for="InputId">New</label>
<input class="form-control" id="groupIdInput" ng-model="state.fest.role" placeholder="Insert new fest" required="" type="text">
</div>
<div class="form-group" id="selectExistingDiv" ng-switch-when="1">
<label for="select1">Select</label>
<select class="form-control" id="select1" ng-model="state.fest.role" ng-options="val for val in festArray">
<option value="">
Select
</option>
</select>
</div>
</div>
</form>
</div>
You can see that I've completely removed any reference to jQuery, and any reference to direct DOM manipulation.
I've chosen to use the ng-switch built-in angular directive which you can read up on here https://docs.angularjs.org/api/ng/directive/ngSwitch
Moving the state into an object attached to $scope inside the controller allows those values to be referenced in the template and allows two-way binding to work.
I did also remove your functions on the controller to emphasize the two-way binding using the switch directive. Stuff happens when those values are updated on $scope. Whether you choose to rely on this specific implementation or not is a matter of preference and architecture, but this is one way you can accomplish your task.
newfest and existingfest methods does not exists in your controller. You have:
$scope.newRole = function() {
$("#addNewDiv").show();
}
$scope.existingRole = function() {
$("#selectExistingDiv").show();
}
change
<input type="radio" name="options" id="option1" autocomplete="off" ng-model="value" ng-change="newfest()">
to
<input type="radio" name="options" id="option1" autocomplete="off" ng-model="value" ng-change="newRole()">
Using the aurelia-validator plugin, even though the code for form submission and validation works properly, all properties are properly updated, the UI doesn't change, like I don't get a red window around properties which are not correct, nor the statement of what is wrong with given form property.
It's not connected to my CSS, I tried removing whole my css and still it doesn't work. Any idea what's wrong here? Missing something?
contact.js
import {inject} from 'aurelia-framework';
import {Validation} from 'aurelia-validation';
#inject(Validation)
export class Contact{
firstName = 'John';
lastName = '';
company = '';
subject = 'product question';
email = '';
messageText = 'test';
constructor(validation){
this.validation = validation.on(this)
.ensure("firstName")
.isNotEmpty()
.ensure("lastName")
.isNotEmpty()
.ensure("email")
.isNotEmpty()
.isEmail();
}
contact(){
this.validation.validate()
.then(() => {
console.log("works");
})
.catch(() => {
console.log("error");
});
}
}
contact.html
<template>
<div class="row contact-container">
<div class="col-md-4 col-md-offset-3">
<form role="form" validate.bind="validation" submit.delegate="contact()">
<label>First Name</label>
<input type="text" value.bind="firstName" class="form-control" >
<label>Last name</label>
<input type="text" value.bind="lastName" class="form-control">
<label>Company</label>
<input type="text" value.bind="company" class="form-control">
<label>Email</label>
<input type="text" value.bind="email" class="form-control">
<label >Subject</label>
<select value.bind="subject" class="form-control">
<option value="product question">Product Question</option>
<option value="cooperation">Cooperation</option>
<option value="Other">Other</option>
</select>
<label for="message">Message</label>
<textarea rows="5" id="message" value.bind="messageText" class="form-control"></textarea>
<br></br>
<input type="submit" class="form-control">
</form>
</div>
</div>
</template>
I guess the problem is related to the fact that Your markup doesn't match ViewStrategy You are using.
I suspect You might be using some ViewStragegy provided by Aurelia, for example https://github.com/aurelia/validation/blob/master/doc/Intro.md#configuseviewstrategyviewstrategyinstance that expects Twitter Bootstrap markup. If that is the case, You should group Your form intputs to form-groups - see the demo (http://aurelia.io/validation/#/) and source of the TWBootstrapViewStrategyBase class: https://github.com/aurelia/templating-validation/blob/master/src/strategies/twbootstrap-view-strategy.js#L11
Use form-group class, don't forget about validate on input
try smth like
<div class="form-group">
<label class="col-sm-3">Land</label>
<div class="col-sm-6">
<input class="input-small col-sm-12" type="text"
placeholder="Land"
value.bind="model.item.country" validate="country">
</div>
</div>
I've made a little demonstration of my problem here: http://jsfiddle.net/nt3Z3/
I'm using Bootstrap v3.1 and jQuery v1.11 and in my contact form I have ~5 inputs and ~1 textarea:
<fieldset>
<div class="form-group"> <!-- Only Posting one for size purposes -->
<label for="nameBox" class="col-lg-2 control-label">Name</label>
<div id="nameGroup" class="col-lg-10">
<input type="text" id="nameBox" class="form-control" placeholder="John Smith" required="" />
</div>
</div>
<div class="form-group">
<label for="messageBox" class="col-lg-2 control-label">Message</label>
<div id="messageGroup" class="col-lg-10">
<textarea id="messageBox" class="form-control" placeholder="Your content here" required="" rows="3"></textarea>
</div>
</div>
<button type="submit" id="submitButton" class="btn btn-primary center-block">Submit</button>
</fieldset>
In my js file I have something along the lines of:
$("#submitButton").click(function () {
var name = $.trim($("#nameBox").val());
if ($("input, textarea").val() == "") {
$(this).parent().addClass("has-error");
}
});
I've imported jquery's latest straight from Google's API.
So, back to the problem. When I click the submit button with nothing in the text boxes the fieldset gets the class has-error when only the div nameGroup (and so on) should have. I've attempted to remove the $.trim to see if that was the problem and that did no success.
What my final output should be when I press the submit button and no text is in any of the inputs should look like
<fieldset>
<div class="form-group">
<label>Name</label>
<div id="nameGroup" class="col-lg-10 has-error">
<input type="text" />
</div>
</fieldset>
But with the current js I have above, I get this
<fieldset class="has-error"> <!-- go away has-error -->
<div class="form-group">
<label>Name</label>
<div id="nameGroup" class="col-lg-10 has-error">
<input type="text" />
</div>
</fieldset>
Am I doing something wrong? Overlooking something? Is there an easy way to have the fieldset not acquire the has-error class without saying $("fieldset").removeClass("has-error"); or without putting $("#nameGroup").addClass("has-error"); for each group?
This code:
if ($("input, textarea").val() == "") {
$(this).parent().addClass("has-error");
}
Puts the class on the parent of #submitButton (since it's in a click handler on #submitButton). It also only checks the value of the first input or textarea on the page (not the others).
If you want it on, say, the parent of each individual input or text box, then:
$("input, textarea").each(function() {
if (!$.trim(this.value)) {
$(this).parent().addClass("has-error");
}
});
or if you like
$("input, textarea").each(function() {
var $this = $(this);
if (!$.trim($this.val())) {
$this.parent().addClass("has-error");
}
});
The buttons' parent is the fieldset. Not the form-group.
If you want to target the form-group you can do this:
.parent().find('.form-group');