reset form value/object to empty upon ng-click in AngularJS - javascript

Description:
I'm using ui-router to load form pages upon icon click, whenever the user clicks the icon the new form should load ( remove any filled fields ). I have added ng-click on icon which can be leveraged to reset the form values.
index.html
<td>
<a ui-sref="form2"
title="yahoo">
<span class="glyphicon glyphicon-file" ng-click="newForm('new')" id="yahooIcon" ></span>
</a>
</td>
form2.html
<input type="text" name="firstname" ng-model="myModel.firstname"><br>
app.js
$scope.newForm = function (id){
if ( id == 'new' )
{
console.log(" model value inside: "+$scope.myModel.firstname);
$scope.myModel = {};
}
}
Problem:
ng-model data is showing undefined in controller and not able to reset the model upon clicking the icon.
The demo uses the same controller, However if my from has different controllers than index page. How can i send button click (ng-click) value to child controllers ?
DEMO ( Plunker )

Please Try This
//In Html Page
<button type="reset" ng-click="resetForm(formObject)">Clear Form</button>
//In Angular
$scope.resetForm = function(form) {
angular.copy({},form);
}

Related

Button unexpectedly submitting form

So, I'm building a form where you select a date, then you can add timeslots to that date to schedule things. Something like this:
<form name="NewForm" ng-submit="submitForm(NewForm)">
<form-group>
<angular-ui datepicker>
<button ng-click="addRow()">
</form-group>
<form-group ng-repeat="timepicker in timepickers track by $index">
<angular-ui timepicker>
<select box for tasks to pick from>
<button class="btn btn-danger" ng-click="deleteRow($index)">
</form-group>
<button type="submit" class="btn btn-primary">
</form>
Then in the controller I have:
$scope.timepickers = []
$scope.addRow = function() {
$scope.timepickers.push({ some default object data to fill out the row });
}
$scope.deleteRow = function(index) {
$scope.timepickers.splice(index, 1);
}
$scope.submitForm(form) {
if ($scope.timepickers.length < 1) {
//do some stuff and don't send the form
}
else if (form.$valid) {
//send form data to api
}
else {
//do some other stuff and don't send the form
}
}
The delete button was the last thing I added, and everything was working fine before I added it. The problem, however, is that sometimes when I push the delete button on a row, it submits the form and for the life of me I can't figure out why.
If I only have 1 or 2 'rows' it works fine. The delete button deletes the row and I can keep adding new rows, etc. If I have more than 2 rows added, though, AND I try to delete one of the rows in the middle (ie where if I checked if '$middle == true' in the ng-repeat), then it deletes the row and calls the submitForm function.
I know it actually runs through the submitForm function because if I don't fill out the form completely, then the validation stuff still triggers and the submit doesn't go through.
Anyone have any ideas?
You need to add the attribute of type button:
<button class="btn btn-danger" ng-click="deleteRow($index)" type="button">

Angular JS doesn't update select and input from date calendar

I'm using Angular JS and Bootstrap and I want to update the input of a datepicker calendar and a select from a function.
The values are updated but I can't see these on their correspondent inputs.
We can say that I'm updating the model but not the view. If I update the model from the view everything works fine but not to the contrary.
In the same form, if I update a a checkBox making clic ... Surprise. The select and the datepicker calendar are updated.
How can I update the view from my model and see this update?
Edit 1:
HTML
<select ng-model = "searchPAI.sistemaSelected" class="form-control" ng-options="sistema.nombreSistema for sistema in listSistemas">
</select>
<p class = "input-group" ng-controller = "dpFechaDesde">
<input type = "text" class = "form-control" uib-datepicker-popup = "{{format}}" name = "dtInicio" ng-model = "dateFrom" is-open = "popup1.opened" ng-change = "change2()"
min-date = "minDate" max-date = "maxDate" datepicker-options = "dateOptions" close-text = "Cerrar" clear-text = "Borrar" now-text = "Hoy" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
JS:
$scope.searchPAI.sistemaSelected = $scope.listSistemas[id];
$scope.$on("updateFechaDesde", function(){
$scope.dateFrom = publicDPFactory.date;
MyVar.data.dtFrom = publicDPFactory.date;
console.log("publicDPFactory.date: " + publicDPFactory.date);
console.log("scope.dateFrom: " + $scope.dateFrom);
});
I remember, everything works fine if I update the model from the view.
Edit 2:
More surprises! How I said previously, I update the value from the model and I can't see these on the view.
But, if I make a clic over "SI" ... Surprise!!! I can see the values updated on the view. You can see right now the select and the datapicker updated.
Fixed it!!!
To update the view from the model, after updated the model you have to call to ...
$scope.$apply();
And right now you can see all the changes!!!
How can you see, I don't need to make any clic over any other component from the form to see my values updated in the model on the view.

Editable input text fields in AngularJs do not reset

I'm trying to edit a forms input text field. So the value is loaded from the API and then if you press edit button you can change the value and either cancel the changes or update with the new value you just entered. I try to to store the pre-edited value in a local variable so that I can be able to cancel the changes. Here is my code in the controller.
$scope.preEditFirstName = {};
$scope.edit = function(model) {
// Copy preedited data locally
$scope.preEditFirstName = angular.copy(model);
}
$scope.cancelEdit = function(model){
$scope.model = angular.copy($scope.preEditFirstName);
console.log($scope.model); //Correct result!
};
And here is the view
<div ng-show="beforeFirstNameEdit">
{{accountData.firstname || "Loading..."}}
</div>
<div ng-show="!beforeFirstNameEdit">
<input name="firstName" ng-model="accountData.firstname" placeholder="First Name" type="text" />
</div>
<div ng-show="beforeFirstNameEdit">
<button type="button" ng-click="beforeFirstNameEdit = false; edit(accountData.firstname)">Edit</button>
</div>
<div ng-show="!beforeFirstNameEdit">
<button type="button" ng-click="beforeFirstNameEdit = true; update(accountData.firstname)">Save</button>
<button type="button" ng-click="beforeFirstNameEdit = true; cancelEdit(accountData.firstname)">Cancel</button>
</div>
At first you just see an "edit" button and when you press it the buttons save and cancel appear. So even if the local variable is correctly saved, when I press the cancel button the field does not show its pre-edit text. How can I fix this?
In cancelEdit use $scope.accountData.firstname instead of $scope.model
To make it reusable:
View:
<button type="button" ng-click="beforeFirstNameEdit = true; cancelEdit('firstname')">Cancel</button>
Controller:
$scope.cancelEdit = function(model){
$scope.accountData[model] = angular.copy($scope.preEditFirstName);
};
So now cancelEdit will work for all models starting with accountData.*

Angular JS validation step by step is not working

I have started to get into Angular JS validation....
I have this step:
<step title="Let's begin with some information about your business">
<form name="myForm" ng-submit="submitForm(myForm.$valid)" novalidate>
<table>
<tr>
<td><label>Your Name</label></td><td><input class="form-control" type="text" ng-model="user.name" required /></td>
</tr>
</table>
</form>
</step>
and I have this button outside of the steps...outside of the wizard:
<a class="btn btn-default" ng-click="gotoNextStep()" ng-show="showNextButton()">Next</a>
and in my js file, I have this function called on ng-click:
$scope.gotoNextStep = function () {
if ($scope.currentStepIndex == (3)) {
$scope.submitForm = function (isValid) {
if (isValid) {
toggleSteps($scope.currentStepIndex + 1);
}
};
} else {
toggleSteps($scope.currentStepIndex + 1);
}
}
what I am trying to do is prevent the user from going to the next step until the required field is filled.
just before my step ends and after the form ends I added this <p>{{myForm.$invalid}}</p> and it appears as true, if I change it to valid it returns false. So it seems like this is kinda working except I cant provent my user from going to the next page.
Currently with this code, the button does not goto the next step even if the required field is filled in or not. Please Help.
I should also note that $scope.submitForm is saying its undefined :(
Another note.. {{myForm.$valid}} returns false but when I fill out the required field it returns true....how would I use myForm.$valid in the js file for the $scope.gotoNextStep function
Could you use ng-disabled in your button? Like this:
<a ng-disabled="myForm.$pristine || myForm.$invalid" class="btn btn-default" ng-click="gotoNextStep()" ng-show="showNextButton()">Next</a>
And then get rid of the ng-submit in the form tag. I also just noticed you have novalidate on your form. You should remove that too.

Simulating a submit and validation to a separate form on AngularJS

How to simulate submit plus validation on a form whose button is outside of it?
It can be done with this:
HTML:
<div ng-controller="MyCtrl">
<form ng-submit="onSubmitted()">
Header inputs:
<input type="name" ng-model="sample" required/>
<input type="name" ng-model="sampleX" required/>
<div style="visibility: hidden">
<input type="submit" id="clcikMe" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
</div>
</form>
<hr/>
Some other form here. Think line items
<hr />
<a class="btn" linked="clcikMe">Wanted this submit button to trigger the validation+submit on the form in which this button doesn't belong</a>
</div>
Javascript:
var app = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.onSubmitted = function() {
alert('submitted!');
};
}
app.directive("linked",function(){
return function (scope, element, attrs) {
var id = attrs["linked"];
element.on("click",function(){
document.getElementById(id).click();
});
};
});
But I wanted to stay away from that approach, it's very kludgy, it triggers a validation+submit by simulating a submit on first form by clicking its hidden submit button
Is there an API on AngularJS (or even plain javascript) that will let me achieve my objective? I.e. without using any hidden submit button
You're not thinking very Angular here. No one is forcing you to work with form ng-submit. Just use 2 buttons each with their own ng-click="runThisFunction()" or simply use the same function and pass along a parameter. i.e:
<button ng-click="submitForm(true)">Validate + Submit</button>
and
<button ng-click="submitForm(false)">Only Validate</button>
Then in your controller:
$scope.submitForm = function(shouldSubmit) {
//run validation here.
//either using $scope.form.name.$valid or ng-model $scope variable
var dataGood = false;
if ($scope.sample === "goodData" && $scope.sample === "alsoGoodData" ) {
//data is good
dataGood = true;
//alert user that data is good!
alert('good job, your data is great!');
}
else {
//data is bad
alert (' data bad, dear padowan');
}
if (!shouldSubmit) return;
//perform $http request to server, or navigate to a different page or whatever
if (dataGood) {
//submit data to server and let the party begin
$http.post('/api/rocknroll/submit', { sample: $scope.sample, sampleX: $scope.sampleX}).then( $scope.handleResponse);
}
}
This will work whether or not you're in the scope of the form, but you need to be in the scope of the controller.

Categories