I am new to angularjs. I have searched for this problem but I found some solutions but none of them were working for me. So, I have a form which is
HTML
<div class=" row col-xs-12 col-md-12">
<div id="candidateInfoCorners" ng-show="showcandidateInfo">
<div class="col-xs-12 col-md-12 info-header">
<h>Candidate Information</h>
</div>
<form class="form-horizontal" role="form" name="Candidateform">
<div class="row">
<div class="col-md-6">
<label class="control-label col-sm-4 candidateNpInDaysLabelPosition" for="noticePeriod">Notice Period In Days :</label>
<div class="col-sm-4">
<input type="number" min="0" ng-model="candidate.noticePeriod" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required candidateNpInDaysInputPosition"
id="noticePeriod" placeholder="Noticeperiod" autocomplete="off" required="">
</div>
</div>
<div class="col-md-6">
<label class="control-label col-sm-4 candidateCTCLabelPosition" for="ctc">CCTC In Lakhs :</label>
<div class="col-sm-4">
<input type="number" min="0" decimal-places="" ng-model="candidate.ctc" class="form-control ng-pristine ng-untouched ng-valid-min ng-invalid ng-invalid-required candidateCTCInputPosition"
id="ctc" placeholder="CCTC" autocomplete="off" required="">
</div>
</div>
<div class="col-md-6">
<label class="control-label col-sm-4 candidateECTCLabelPosition" for="ectc">ECTC In Lakhs :</label>
<div class="col-sm-4">
<input type="number" min="0" decimal-places="" ng-model="candidate.ectc" class="form-control ng-pristine ng-valid-min ng-invalid ng-invalid-required ng-touched candidateECTCInputPosition"
id="ectc" placeholder="ECTC" autocomplete="off" required="">
</div>
</div>
<div class="col-md-6">
<label class="col-sm-4 control-label candidateCommunicatioLabelPosition" for="communication">Communication :</label>
<div class="col-sm-4">
<select class="selectpicker form-control ng-pristine ng-untouched ng-invalid ng-invalid-required candidateCommunicatioSelectPosition"
ng-model="candidate.communication" name="communication" id="communication" required="">
<option value="" selected="">Communication</option>
<option value="Good">Good</option>
<option value="Average">Average</option>
<option value="Poor">Poor</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
Now, I have a controller where I am using this form like -
$scope.candidate = {
noticePeriod: '',
ctc: '',
ectc: '',
communication: ''
};
And using it like - $scope.candidate.noticePeriod while getting the value.
Now I don't have any submit for the form, this is going to happen on some another action .
$scope.updateDocument = function() {
//Here I want to check the Form is valid or not
//I tried
//$scope.candidateform.$valid but I am getting an error like
Cannot read property '$valid' of undefined
}
Both functions are in the same controller
Can any one help me with this?
You need to use ng-form
This is how I do it.
I make a parent property like
$scope.myforms = {
Candidateform: {}
};
//HTML will be
<ng-form name="myForms.CandidateForm">...</ng-form>
//TO VALIDATE I DO IT LIKE THIS
$scope.myForms.CandidateForm.$submitted = true // This will run the validators as well, this means form has been submitted.
//OR TO SUBMIT IT PROGRAMATICALLY
$scope.myForms.CandidateForm.$valid
You have some errors in your code, You name your form "Candidateform" and then in controller you are only using $scope.candidate. Change that to $scope.CandidateForm
function Controller($scope) {
$scope.master = {};
$scope.user = {
name: "",
email: ""
};
$scope.update = function(user) {
//$scope.master = angular.copy(user);
console.log($scope.master)
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html ng-app>
<div ng-app="demo1">
<div ng-controller="Controller">
<ng-form novalidate class="simple-form" name="master">
<legend>User Profile</legend>
<div class="control-group-error">
<label class="control-label" for="input-error">Name</label>
<div class="controls">
<input type="text" name="username" ng-model="user.name">
<span class="help-inline">Please correct the error</span>
</div>
<label>E-mail</label>
<input type="email" name="email" ng-model="user.email">
</div>
</ng-form>
<button class="btn btn-primary" ng-click="update(user)">Save</button>
<br />
<pre>{{master.$valid}}</pre>
</div>
</div>
</html>
Related
I have problem with getting data from a div tag. This is my div
<div id="log">
<div class="form-group" style="border-bottom:1px solid black;">
<div class="form-group">
<label class="col-sm-2 control-label"> Log Name <sup style="color:red">(*)</sup></label>
<div class="col-sm-2">
<input type="text" class="form-control text banner_value" id="banner_value" />
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label"> Start Day <sup style="color:red">(*)</sup></label>
<div class="col-sm-2">
<input type="date" class="form-control text" id="start_day" />
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label"> End Day <sup style="color:red">(*)</sup></label>
<div class="col-sm-2">
<input type="date" class="form-control text" id="end_day" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> Filter Condition <sup style="color:red">(*)</sup></label>
</div>
<div id="banner_input" class="form-group">
<label class="col-sm-2 control-label"> Banner </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="banner_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="banner_split"> <lable> split </lable><br>
</div>
</div>
<div id="domain_input" class="form-group">
<label class="col-sm-2 control-label"> Domain </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="domain_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="domain_split"> <lable> split </lable><br>
</div>
</div>
</div>
</div>
and here it's on browser :
after i click Add :
I'm using document.getElementById("log").textContent to get data that i filled to this div, but it didn't work. How can I get my data ??? Please help. Thanks for reading my question.
function getValues() {
var inputs = document.getElementById("log").getElementsByTagName("input");
var values = [];
for (i in inputs) {
values.push(inputs[i].value);
}
console.log(values);
}
<div id="log">
<div class="form-group" style="border-bottom: 1px solid black;">
<div class="form-group">
<label class="col-sm-2 control-label">
Log Name <sup style="color: red;">(*)</sup></label
>
<div class="col-sm-2">
<input
type="text"
class="form-control text banner_value"
id="banner_value"
/>
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label">
Start Day <sup style="color: red;">(*)</sup></label
>
<div class="col-sm-2">
<input type="date" class="form-control text" id="start_day" />
<div class="help-block with-errors"></div>
</div>
<label class="col-sm-2 control-label">
End Day <sup style="color: red;">(*)</sup></label
>
<div class="col-sm-2">
<input type="date" class="form-control text" id="end_day" />
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">
Filter Condition <sup style="color: red;">(*)</sup></label
>
</div>
<div id="banner_input" class="form-group">
<label class="col-sm-2 control-label"> Banner </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="banner_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="banner_split" />
<lable> split </lable><br />
</div>
</div>
<div id="domain_input" class="form-group">
<label class="col-sm-2 control-label"> Domain </label>
<div class="col-sm-3">
<input type="text" class="form-control text" id="domain_value" />
<div class="help-block with-errors"></div>
</div>
<div class="col-sm-3">
<input type="checkbox" class="control-label" id="domain_split" />
<lable> split </lable><br />
</div>
</div>
</div>
</div>
<button onclick="getValues()">click me</button>
var inputs = document.getElementById("log").getElementsByTagName("input");
var values = [];
for (i in inputs) {
values.push(inputs[i].value);
}
console.log(values);
you can use this JS code after click a button
if you want to get data from input tag
function myFunction() {
console.log(document.getElementById("myText").value)
}
<!DOCTYPE html>
<html>
<body>
Name: <input type="text" id="myText" value="">
<button onclick="myFunction()">Try it</button>
</body>
</html>
I think what you want to get is the whole information. In that case you need to use the
form
tag instead of div. Div doesn't have a meaning related to data. It is just a container displayed as block.
If You want to get the value of input fields, try to put this in your html:
<script>
const logYourLog = (e) => {
console.log('Here is your value', document.getElementById("banner_value").value);
}
</script>
If you want to get data from the form, and you are using jquery. There is function called serialize() already in there. But, if you are in plain javascript, I guess you should use library for easy purpose. You can also make your own function.
serialize library but I have not tested it. Just check if you get what you need.
You must be able to do sthg like this after you add that library:
var allData = serialize(document.getElementById("log"));
Note:- if allData is not stored, try changing div to form, that should do work.
I want the value in the input text to be null after the hide process
This is my view :
<div class="form-group row">
<label for="status" class="col-sm-4 col-form-label col-form-label-sm">Status Karyawan</label>
<div class="col-sm-8">
<select id="status" name="status" class="form-control form-control-sm" required>
<option value="" selected>Pilih Status Karyawan</option>
<option value="Kontrak">Kontrak</option>
<option value="Tetap">Tetap</option>
</select>
</div>
</div>
<div class="form-group row" id="tgl_pengangkatan" style="display:none">
<label for="tgl_pengangkatan" class="col-sm-4 col-form-label col-form-label-sm">Tgl. Pengangkatan</label>
<div class="col-sm-8 input-group">
<input name="tgl_pengangkatan" type="text" class="form-control datepicker form-control-sm" id="tgl_pengangkatan" placeholder="yyyy-mm-dd" value="">
</div>
</div>
<div class="form-group row" id="tgl_berakhir_kontrak" style="display:none">
<label for="tgl_berakhir_kontrak" class="col-sm-4 col-form-label col-form-label-sm">Tgl. Akhir Kontrak</label>
<div class="col-sm-8 input-group">
<input name="tgl_berakhir_kontrak" type="text" class="form-control datepicker form-control-sm" id="tgl_berakhir_kontrak" placeholder="yyyy-mm-dd" value="">
</div>
</div>
And than, this is my script:
<script>
$(function () {
$("#status").change(function() {
var val = $(this).val();
if(val === "Kontrak") {
$("#tgl_berakhir_kontrak").show();
$("#tgl_pengangkatan").hide();
$("#tgl_pengangkatan").val('');
}
else if (val === "Tetap") {
$("#tgl_pengangkatan").show();
$("#tgl_berakhir_kontrak").hide();
$("#tgl_berakhir_kontrak").val('');
}
});
});
I want to make it like that to minimize errors in the input process, thanks.
The element you are trying to change should be called with its name, not the id. Try changing it as:
$('[name="tgl_berakhir_kontrak"]').val('');
By the way, it's not a good practice to give identical name and id to separate elements on the same page.
I need to disable the textbox inside my angularJS dynamic form after I clicked the button. my code seems to be working fine if I am going to disable textbox outside the dynamic form but when I get the ID of the textbox inside the dynamic form it is not working. What could be the problem.
$scope.copyText = function () {
document.getElementById('copyText').disabled=true;
document.getElementById('bName').disabled=true;
document.getElementById('pName').disabled=true;
// $('#bName').attr('disabled', true);
//alert('#bName');
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
My View looks like this
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" required/>
</div>
</div><br/><br/><br/>
Why not use ng-disabled. You need to change $scope.disableThis=false; back to false to re-enable the text somewhere else inside the controller code.
$scope.copyText = function () {
$scope.disableThis=true;
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
Suggestions:
I have some doubts on the above code, you can just use the $scope.LanguageFormData.language as is, since you are using ng-model in the input fields, the data of the variable is updated dynamically, you can check this by {{LanguageFormData.language}} printing the output in the HTML
HTML:
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" ng-disabled="disableThis" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" ng-disabled="disableThis" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" ng-disabled="disableThis" required/>
</div>
</div><br/><br/><br/>
Suggestions:
It would be good if you restrict the ID for one particular element alone, its a good practice to follow in general!
I have the following form : two text inputs then an ng-repeat with a text and radio inside.
<form class="form-horizontal" id="myForm" name="myForm">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Company Name</label>
<div class="col-sm-10">
<input type="text" name="cname" ng-model="company.name" class="form-control" required></input>
</div>
</div>
<div class="form-group">
<label for="category" class="col-sm-2 control-label">HQ</label>
<div class="col-sm-10">
<select ng-model="company.hq" ng-options="hq as hq.name for hq in hqs" required>
<option></option>
</select>
</div>
</div>
<div class="form-group" ng-repeat="item in getR(4) track by $index">
<label for="name" class="col-sm-2 control-label">Top pick {{$index+1}}</label>
<div class="col-sm-10">
<input type="text" name="quizsize" ng-model="company.product[$index]" class="form-control" required></input>
<label><input type="radio" name="test" ng-model="company.radioValue" value="{{$index+1}}"/> Choose</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" value="submit" class="btn btn-primary" ng-click="addCompany(company)"></button>
<button type="btn" value="cancel" class="btn btn-danger" ng-click="cancelBtn()">Cancel</button>
</div>
</div>
</form>
addCompany method from the controller :
$scope.addCompany = function(company)
{
console.log(company.radioValue);
$http.post('http://localhost/api/index.php/Test/companies', company)
.success(function(data)
{
$scope.companies.push(data[0]);
})
.error(function(err)
{
})
};
And the method to for the inputs ng-repeat:
$scope.getR = function(n)
{
return Array(n);
}
When I submit it:
If I start by adding company name/hq then all is good, but
If I start by first clicking on a radio button then when I send the form I get an undefined radioValue error.
use ng-value instead of value to be sure the model is ready to be bound to
<input type="radio" ng-value="($index + 1)" ng-model="company.radioValue">
https://docs.angularjs.org/api/ng/directive/ngValue
I'm new to angular but picking it up quickly. I have this controller that works, based on demo code ive hacked together, but there has to be an easier cleaner way to get all the fields and post so if i want to add a new field i dont need to keep adding it in the various locations.
Heres the controller:
'use strict';
angular.module('goskirmishApp').controller('addEvent', function ($scope, fbutil, $timeout) {
// synchronize a read-only, synchronized array of messages, limit to most recent 10
$scope.messages = fbutil.syncArray('messages', {limit: 10});
// display any errors
$scope.messages.$loaded().catch(alert);
// provide a method for adding a message
$scope.addMessage = function(newEventName,newEventType,newStartDate,newStartTime,newEndDate,newEndTime,newEventDescription,newAddress,newPostcode,newTicketInformation,newBookLink) {
if( newEventName ) {
// push a message to the end of the array
$scope.messages.$add({
eventName: newEventName,
eventType: newEventType,
startDate: newStartDate,
startTime: newStartTime,
endDate: newEndDate,
endTime: newEndTime,
eventDescription: newEventDescription,
address: newAddress,
postcode: newPostcode,
ticketInformation: newTicketInformation,
bookLink: newBookLink
})
// display any errors
.catch(alert);
}
};
function alert(msg) {
$scope.err = msg;
$timeout(function() {
$scope.err = null;
}, 5000);
}
});
And the view:
<h2>Add Event</h2>
<p class="alert alert-danger" ng-show="err">{{err}}</p>
<form role="form">
<div class="form-group">
<label>Event Name</label>
<input class="form-control" type="text" ng-model="newEventName">
</div>
<div class="form-group">
<label>Event Type</label>
<select class="form-control" ng-model="newEventType">
<option value="" disabled selected>Game type</option>
<option value="milsim">Skirmish</option>
<option value="milsim">Special Event</option>
<option value="milsim">Weekender</option>
<option value="milsim">Milsim</option>
</select>
</div>
<div class="form-group">
<label>Start Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="newStartDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="newStartTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>End Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="newEndDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="newEndTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>Event Description</label>
<textarea class="form-control" rows="4" ng-model="newEventDescription"></textarea>
</div>
<div class="form-group">
<label>Address</label>
<input class="form-control" ng-model="newAddress">
</div>
<div class="form-group">
<label>Postcode</label>
<input class="form-control" ng-model="newPostcode">
</div>
<div class="form-group">
<label>Ticket Information</label>
<textarea class="form-control" rows="4" ng-model="newTicketInformation"></textarea>
</div>
<div class="form-group">
<label>Booking Link</label>
<input class="form-control" ng-model="newBookLink">
</div>
<button type="submit" class="btn btn-danger" ng-click="addMessage(newEventName,newEventType,newStartDate,newStartTime,newEndDate,newEndTime,newEventDescription,newAddress,newPostcode,newTicketInformation,newBookLink,newLat,newLong,newApproved);newEventName = null;newEventType = null;newStartDate = null;newStartTime = null;newEndDate = null;newEndTime = null;newEventDescription = null;newAddress = null;newPostcode = null;newTicketInformation = null;newBookLink = null;">Add Event</button>
</form>
Help is greatly appreciated!
Define all your input in a object that you will be directly send send to firebase
For example init in your controller this :
$scope.form = {};
After in your template just define your input as 'form attributes'.
<h2>Add Event</h2>
<p class="alert alert-danger" ng-show="err">{{err}}</p>
<form role="form">
<div class="form-group">
<label>Event Name</label>
<input class="form-control" type="text" ng-model="form.eventName">
</div>
<div class="form-group">
<label>Event Type</label>
<select class="form-control" ng-model="form.eventType">
<option value="" disabled selected>Game type</option>
<option value="milsim">Skirmish</option>
<option value="milsim">Special Event</option>
<option value="milsim">Weekender</option>
<option value="milsim">Milsim</option>
</select>
</div>
<div class="form-group">
<label>Start Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="form.startDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="form.startTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>End Date & Time</label>
<div class="row">
<div class="col-sm-6">
<input class="form-control" type="date" placeholder="Date" ng-model="form.endDate"/>
</div>
<div class="col-sm-6">
<input class="form-control" type="time" placeholder="Time" ng-model="form.endTime"/>
</div>
</div>
</div>
<div class="form-group">
<label>Event Description</label>
<textarea class="form-control" rows="4" ng-model="form.eventDescription"></textarea>
</div>
<div class="form-group">
<label>Address</label>
<input class="form-control" ng-model="form.address">
</div>
<div class="form-group">
<label>Postcode</label>
<input class="form-control" ng-model="form.postcode">
</div>
<div class="form-group">
<label>Ticket Information</label>
<textarea class="form-control" rows="4" ng-model="form.ticketInformation"></textarea>
</div>
<div class="form-group">
<label>Booking Link</label>
<input class="form-control" ng-model="form.bookLink">
</div>
<button type="submit" class="btn btn-danger" ng-click="addMessage()">Add Event</button>
</form>
and directly in your addMessage function
$scope.addMessage = function() {
if( $scope.form.eventName ) {
// push a message to the end of the array
$scope.messages.$add($scope.form)
// display any errors
.catch(alert);
//Reset your form
$scope.form = {};
}
};