I have the following code, which shows the a.btn anchor if both inputs have values and inputURL is a valid URL. Works fine but I want to hide the button again on click, how do I do this, do I reset the form or actually hide the button on click?
<form name="myForm" class="row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input name="inputName" type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" required>
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" required>
</div>
<div class="col-xs-2">
Post
</div>
</form>
What I've done before is create a scope variable in your controller:
$scope.formSubmitted = false;
Then in your saveToList function set $scope.formSubmitted to true. From here you have a few options. If you're "Post" button is an actual button then you could set the disabled attribute. You could also check if formSubmitted is true inside your saveToList function and if it is true you don't continue. Or you can change your ng-show to be:
ng-show="myForm.$valid && !formSubmitted"
you can do something like this:
define another $scope.someToggle variable, and assign it true, then at the ng-show of the button add it like ng-show="myForm.$valid && someToggle". then at the end (or in callback) of saveToList($event) function, set $scope.someToggle to false.
also you can put this on both inputs: ng-change = "someToggle = true" so whenever they change(after the save button has been clicked) you'd be able to bring it back...
HTML
<body ng-app="myApp">
<div ng-controller="formCtrl">
<form name="myForm" class row inputs">
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a Title/Description</label>
<input name="inputName" type="text" id="urlName" class="form-control" placeholder="" ng-model="mvName" required>
</div>
<div class="col-xs-5">
<label for="exampleInputPassword1">Enter a URL</label>
<input type="url" name="inputURL" id="urlLink" class="form-control" placeholder="" ng-model="mvUrl" required>
</div>
<div class="col-xs-2">
Post
</div>
</form>
</div>
</body>
controller
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.saveToList = function() {
$scope.mvName = '';
$scope.mvUrl = '';
}
});
Alternative
with scope variable without invalidating form
Post
app.controller('formCtrl', function($scope) {
$scope.logicalExp = "||";
$scope.formSubmitted = true;
$scope.saveToList = function() {
$scope.logicalExp = "&&";
$scope.formSubmitted = true;
}
});
the problem with this is, user needs to invalidate the form by himself by removing entered value then hyperlink will be hidden-ed.
Related
I have created an edit button and a form. I can't get my input disabled
until edit button is clicked. All I want to do is make input disabled and when the user clicks on the edit button they should be able to edit the text.
Here is my code:
<div ng-controller="MyCtrl">
<a class="edit" ng-click="inactive = !inactive">Edit</a>
<form>
<b>First Name:</b>
<input type="text" ng-disabled="inactive" ng-model="input1" value="John">
<br>
<b>Last Name:</b>
<input type="text" ng-disabled="inactive" value="Smith">
<br>
<b>Email:</b>
<input type="email" ng-disabled="inactive" value="jsmith#email.com">
</form>
</div>
App.js
function MyCtrl($scope) {
$scope.inactive = false;
}
You can add
ng-click="changeStatus()"
in you angular template.
the full code:
var app = angular.module("Portal", ['ngRoute']);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.inactive = true;
$scope.changeStatus = function() {
$scope.inactive = !$scope.inactive;
};
}]);
To fix your code, you have to invert your boolean variable:
function MyCtrl($scope) {
$scope.inactive = true;
}
But to disable whole form inputs in a cleaner way, put all your inputs inside a fieldset with ng-disabled and remove the ng-disabled from each input...
<form>
<fieldset ng-disabled="inactive">
<b>First Name:</b>
<input type="text" ng-model="name"><br>
<b>Last Name:</b>
<input type="text" ng-model="lastname"><br>
<b>Email:</b>
<input type="email" ng-model="email">
</fieldset>
</form>
Hi guys i just want to ask how to solve this issue.
i have a radio button
<div class="col-sm-2">
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="radioOpt" ng-model="modalData.mine" ng-value="true" ng-change="eval()">mine</label>
</div>
</div>
/* my input fields that is set to disabled *
<div class="col-sm-2" style="padding:0;margin:0;">
<div class="form-group">
<input ng-disabled="disabled " class="form-control" type="text" ng-model="modalData.input">
</div>
</div>
controller :
$scope.eval= function() {
if($scope.modalData.mine) {
$scope.disabled = false;
} else {
$scope.disabled = true;
}
}
heres the codepen guys : http://codepen.io/pango143/pen/YNNJwK
the scenario is i have a disabled input which only be enabled when the mine radio btn is selected. i dont have problem with that, But the problem is when i click another radio btn the input is not returning to disabled state which means the radio button is not sending false value in the binding.
I have a form in my html page:
<div id=update>
<form class="form-inline" ng-submit="updateCompany(company.companyId,company.companyName,company.newPassword,company.newEmail)" ng-show="updateForm">
<h3>Update Company</h3>
<div class="form-group">
<input type="text"
class="form-control" id="companyId" value={{company.companyId}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyName"
value={{company.companyName}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyPassword"
placeholder="Enter New Password" ng-model="company.newPassword"/>
</div>
<div class="form-group">
<input type="email"
class="form-control" id="companyEmail" placeholder="Enter New Email"
ng-model="company.newEmail" />
<button type="submit" class="btn btn-default">UPDATE</button>
</div>
</form>
</div>
I would like to show the current company values(id,name,password,email),
in the text fields, than give the user option to change the password and the email and send all the parameters when I submit the form.
The problem is when I put the ng-model on the text field, the current value disappears.
I need a fix for that!!!
In the first two fields I see the value now because I don't have the ng-model on them, once I put ng-model it disappear.
In your controller just attach the company data to scope like this:
$scope.company = yourcompanydata
And as for submitting the data, you don't have to list all the parameters in your html. In your html just leave:
ng-submit="updateCompany()"
And in your controller:
$scope.updateCompany = function(){
// your submitting logic here and all the company data will
// be available under $scope.company
// including the new password and email entered by the user
// so your submitting logic could look something like this:
submitCompanyData($scope.company.companyId, $scope.company.newPassword,...)
}
Here is a simple version codepen to get you started, depending what you'd like to do with data afterwords. I can update as needed.
angular
.module('app', [])
.controller('ExampleController', ExampleController);
function ExampleController() {
var vm = this;
vm.company = {};
vm.info = info;
function info(info) {
console.log(info);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='app'>
<div class="container" ng-controller="ExampleController as vm">
<form novalidate>
<input type="text" ng-model="vm.company.name" required/>
<input type="email" ng-model="vm.company.email" required/>
<input type="submit" ng-click="vm.info(vm.company)" value="Submit" />
</form>
{{vm.company| json}}
</div>
</body>
I want to show only clicked event field, but it was showing multiple views on each click event.
'use strict';
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope){
$scope.fieldCollectionSingle = [];
$scope.selectSingle = function (fieldkey, field) {
$scope.showSingle_Fieldsettings = true;
};
$scope.showSingle = function (fieldkey, field, index) {
return angular.equals(shownSingle, field, index);
};
$scope.removeName = function (fieldkey) {
$scope.fieldCollectionSingle.splice(fieldkey, 1);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="AppCtrl">
<button class="form-control" ng-click="fieldCollectionSingle.push([])">Single Line Text</button><br/>
<fieldset ng-click="selectSingle()" class="ui-state-default" ng-repeat="(fieldkey, field) in
fieldCollectionSingle">
<label>{{field.single}}</label>
<input type="text" id = "abc{{fieldkey}}" class="form-control" placeholder="Enter name">
<button class="remove" ng-click="removeName($fieldkey)">-</button>
</fieldset>
<div ng-repeat="(fieldkey, field) in fieldCollectionSingle" class="form-group" ng-show="showSingle_Fieldsettings">
<label>Field Label(?)</label><br/>
<fieldset>
<input ng-model="field.single" ng-click="setLabel(fieldkey)" class="fieldLabel">
</fieldset>
</div>
</div>
</div>
[1]: http://jsfiddle.net/vijjusena/17cc74g0/2/ [this is mycode jsfiddle]
At-last I understood your requirement and edited you JSFiddle to create exactly what you wanted. I have changed few things, but I hope you can understand all of them. If something gets you stuck, ask me.
Important: You will have to click on "Default title" text to show the other form to change/update the title.
Here is the JSFiddle. Good luck, have fun!
<div ng-app="myApp">
<div ng-controller="AppCtrl">
<button class="form-control" ng-click="addNewField()">Single Line Text</button>
<fieldset class="ui-state-default" ng-repeat="(fieldkey, field) in fieldCollectionSingle">
<label ng-click="selectSingle(field)">{{ field.label }} : </label>
<input type="text" ng-model="field.value" class="form-control" placeholder="Enter name">
<button class="remove" ng-click="removeName($fieldkey)">-</button>
</fieldset>
<div class="form-group" ng-show="showSingle_Fieldsettings">
<label>Field Label(?)</label>
<fieldset>
<input ng-model="selectedField.label" class="fieldLabel">
</fieldset>
</div>
</div>
</div>
I have an angular form as part of a single page App. The 'Continue' button moves a user to the next section of the app, and has an ng-click. I would like to prevent this ng-click from happening when the button is clicked and the form is invalid, but I don't want to disable the Continue button.
Example: A user comes to the page and immediately clicks the Continue button without providing a first name. The error message "You should provide a first name" is shown and the user remains on the page.
How can I do this? Here is the code:
<form name="form" novalidate >
<div ng-show="form.FirstName.$touched && form.FirstName.$error.required" class="errorMessage">
You must enter a first name
</div>
<div class="form-group">
<label for="firstName" class="form-label">First Name</label>
<input id="firstName" class="form-control" name="FirstName" ng-model="vm.user.firstName" required />
</div>
<div class="btn-group">
<button ng-click="vm.next()">Continue</button>
</div>
</form>
Just add form.$valid && before the function call:
<form name="form" novalidate >
<div ng-show="form.FirstName.$touched && form.FirstName.$error.required" class="errorMessage">
You must enter a first name
</div>
<div class="form-group">
<label for="firstName" class="form-label">First Name</label>
<input id="firstName" class="form-control" name="FirstName" ng-model="vm.user.firstName" required />
</div>
<div class="btn-group">
<button ng-click="form.$valid && vm.next()">Continue</button>
</div>
</form>
Either a button is disabled or it's clickable, you can't have it both ways.
What you could do in your controller for vm.next() is say:
myApp.controller('Page1Controller'), ['$scope', function ($scope)
{
$scope.vm = {};
$scope.vm.next = function()
{
if (! $scope.vm.isFormValid())
return;
//move to the next page with your current code
...
}
$scope.vm.isFormValid()
{
$scope.vm.shouldShowError = $scope.form.valid; //add vm.shouldShowError to your error message ng-show in the view so it will display only after clicking continue
return $scope.form.valid;
}
}]);