I have a form with a checkbox that binds to ng-model property. When I check the checkbox the value is set in the model but when its unchecked, the key and value are never set at all so it fails api validation.
<div class="form-group">
<label for="title">Title</label>
<input type="text" ng-model="post.title" placeholder="Post title..." />
</div>
<div class="form-group">
<label for="author">Author</label>
<input type="text" ng-model="post.author" placeholder="Your name" />
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea ng-model="post.content"></textarea>
</div>
<div class="form-group">
<label for="visible">Visible?</label>
<input type="checkbox" ng-model="post.is_visible" />
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Save" />
</div>
blogModule.controller('PostCreateController', ['$scope', '$stateParams', 'PostResource',
function ($scope, $stateParams, PostResource) {
$scope.post = new PostResource();
$scope.addPost = function () {
console.log($scope.post); // post.is_visible is undefined
//$scope.post.$save();
}
}
]);
This is what the model looks like before it's saved:
{
$resolved: true
author: "asdag"
content: "adfadsf"
title: "adgadf"
proto: ...
}
Why is post.is_visible undefined instead of being set to false? What can I do to make it set false?
try this
<input type="checkbox" ng-model="post.is_visible" ng-init="post.is_visible=false" />
Related
I have a function reset(username) that outputs whatever is entered into the input field of ng-model="username". Why is it not appearing in console though?
This is my function
$scope.reset = function (username) {
console.log(username);
};
and the way I submit the form
<form name="Form" ng-controller="ResetController" ng-submit="reset(username)">
<div>
<div class="row top5">
<label for="username">Username</label>
<div class="col-xs-4">
<input type="text" id="username" placeholder="" maxlength="255"
ng-model="username" required autofocus>
</div>
<div>
<div class="col-xs-5">
<button translate class="btn btn-secondary" type="submit">Reset</button>
</div>
</div>
</div>
</form>
Controller as requested
app.controller("ResetController", function ($scope) {
$scope.username='';
$scope.reset = function (username) {
console.log('username = ', username);
};
});
I believe you do have the ng-app and everything else besides this form, however it is better handled by the DOM if you manipulate your inputs as properties of an object and not directly as $scope. properties. See answers to this here. And note in the code how I attached username to $scope.object.username
var app = angular.module('myApp',[])
app.controller('ResetController',['$scope',function($scope){
$scope.object = {};
$scope.reset = function(username){
console.log(username);
};
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form name="Form" ng-controller="ResetController" ng-submit="reset(object.username)">
<div>
<div class="row top5">
<label for="username">Username</label>
<div class="col-xs-4">
<input type="text" id="username" placeholder="" maxlength="255"
ng-model="object.username" required autofocus>
</div>
<div>
<div class="col-xs-5">
<button translate class="btn btn-secondary" type="submit">Reset</button>
</div>
</div>
</div>
</form>
</div>
I have a one-page application using angularJS.
I have in my controller a user object defined like this :
this.user = {
'name':'Robert',
'age':'30'
}
I made a form to update those informations prefilled with those user's informations on my page such like this :
<form name="userForm" ng-submit="userForm.$valid && pageCtrl.userForm(user)" novalidate>
<label for="name">Name *</label>
<input type="text" name="name" ng-model='pageCtrl.user.name' class="form-control" required/>
<label for="age">Age *</label>
<input type="text" name="age" ng-model='pageCtrl.user.age' class="form-control" required/>
<span ng-if='!userForm.$valid' class="error">Invalid form</span>
<input type="submit" value="Save my informations" class="btn btn-success"/>
</form>
My problem is the following : in the header bar of the page the username is displayed ({{pageCtrl.user.name}}).
When the user acts on the form by changing his name, this is updating before the form is saved.
I'd like to wait for the form submission to see the username updated. But i still want to get my form prefilled with user's informations.
Do you have any idea about how to do this?
Thank you by advance
You can use a copied object to only apply the changes when the user save the form :
var app = angular.module('app', []);
app.controller('pageCtrl', function() {
var vm = this;
vm.user = {
'name':'Robert',
'age':'30'
};
vm.tmpUser = {};
vm.update = function() {
vm.user = angular.copy(vm.tmpUser);
};
vm.reset = function() {
vm.tmpUser = angular.copy(vm.user);
};
vm.reset();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="pageCtrl as pageCtrl">
<form name="userForm" ng-submit="userForm.$valid" novalidate>
<label for="name">Name *</label>
<input type="text" name="name" ng-model='pageCtrl.tmpUser.name' class="form-control" required/>
<label for="age">Age *</label>
<input type="text" name="age" ng-model='pageCtrl.tmpUser.age' class="form-control" required/>
<span ng-if='!userForm.$valid' class="error">Invalid form</span>
<input type="submit" ng-click="pageCtrl.update()" ng-disabled="!userForm.$valid" value="Save my informations" class="btn btn-success" />
</form>
<pre>user = {{pageCtrl.user | json}}</pre>
<pre>tmpUser = {{pageCtrl.tmpUser | json}}</pre>
</body>
Use your ng-model to bind to a temp object , like :
this.tmpUser = {
'name':'Robert',
'age':'30'
}
Your form would be:
<form name="userForm" ng-submit="userForm.$valid && pageCtrl.userForm(user)" novalidate>
<label for="name">Name *</label>
<input type="text" name="name" ng-model='pageCtrl.tmpUser.name' class="form-control" required/>
<label for="age">Age *</label>
<input type="text" name="age" ng-model='pageCtrl.tmpUser.age' class="form-control" required/>
<span ng-if='!userForm.$valid' class="error">Invalid form</span>
<input type="submit" value="Save my informations" class="btn btn-success"/>
</form>
keep your user object :
this.user = {
'name':'Robert',
'age':'30'
}
And when you submit the form, update the user object.
Let's say this is your header,
<header><span ng-show="pageCtrl.formSubmitted">{{ pageCtrl.user.name }}</span></header>
In the pageCtrl.userForm(user) function just make the pageCtrl.formSubmitted true once your form is successfully submitted. Cool things, is you can use this boolean for other purposes as well.
I have a view that is modeled to functions which pass data through to a database. This is all working and I see the data coming back when called, but it is not pre-populating the fields in my view when it comes back. I've been banging my head for a while on this. Everything is modeled (from what I can tell) properly.
I have stepped through the JS code below in Chrome and see the data being assigned to my $scope variables from the data.XXX return.
But, after load finishes, it's not preselecting my radio button or populating the fields with the data. Any help greatly appreciated.
Here is the View:
<div class="notification-container">
<form name="notificationForm" class="form-horizontal" ng-submit="saveQrNotifications()">
<div class="list-unstyled">
<input id="text" ng-model="NotificationMethods.NotificationMethodId" ng-change="notifyVisible()" name="text" type="radio" ng-value="1001"> Text Message<br>
<input id="email" ng-model="NotificationMethods.NotificationMethodId" ng-change="notifyVisible()" name="email" type="radio" ng-value="6"> Email<br>
<input id="voice" ng-model="NotificationMethods.NotificationMethodId" ng-change="notifyVisible()" name="voice" type="radio" ng-value="1003"> Voice<br>
<input id="nocontact" ng-model="NotificationMethods.NotificationMethodId" ng-change="notifyVisible()" name="nocontact" type="radio" ng-value="1000"> Do Not Contact<br>
</div>
<div class="col-md-12 notification-fields" ng-show="notifyFieldVisibility == true">
<div class="col-md-12" ng-if="NotificationMethods.NotificationMethodId == '1001'">
<label class="notication-input">Text Number</label>
<span class="clearfix"></span>
<input class="form-control area-code" type="text" ng-model="NotificationMethods.NotificationTextAreaCode" placeholder="(555)" required>
<input class="form-control phone-number" type="text" ng-model="NotificationMethods.NotificationTextPhoneNumber" placeholder="555-5555" required>
</div>
<div class="col-md-12" ng-if="NotificationMethods.NotificationMethodId == '6'">
<label class="notification-input" for="email">E-mail Address
<input class="form-control" id="email" name="email" type="text" ng-model="NotificationMethods.NotificationEmailAddress" placeholder="ex.me#example.com" required>
</label>
</div>
<div class="col-md-12" ng-if="NotificationMethods.NotificationMethodId == '1003'">
<label class="notication-input">Voice Number </label>
<span class="clearfix"></span>
<input class="form-control area-code" type="text" ng-model="NotificationMethods.NotificationVoiceAreaCode" placeholder="(555)" required>
<input class="form-control phone-number" type="text" ng-model="NotificationMethods.NotificationVoicePhoneNumber" placeholder="555.5555" required>
<label class="small">Ext.</label>
<input class="form-control extension" type="text" ng-model="NotificationMethods.NotificationVoiceExtension" placeholder="555">
</div>
<span class="clearfix"></span>
<div ng-show="notifyLoading" class="text-center" style="margin-top: 10px;">
<i class="fa fa-spinner fa-spin"></i> Saving...
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary notification-btn">Save Notifications</button>
</div>
</div>
</form>
</div>
Here is my controller:
DATA COMING FROM DB:
if (data.StatusCode == "SUCCESS") {
$scope.refill = data;
//$scope.deliverTypes = data.DeliveryTypes;
$scope.showError = false;
$scope.submitRefill = true;
$scope.findRefillStatus = userMessageService.QuickRefillMessage(data.Prescriptions[0]);
$scope.isRefillable = data.Prescriptions[0].IsRefillable;
$scope.prescription.noPrescription.$valid = true;
$scope.loading = false;
$scope.NotificationMethods.NotificationEmailAddress = data.NotificationEmailAddress;
$scope.NotificationMethods.NotificationMethodId = data.NotificationMethodId;
$scope.NotificationMethods.NotificationTextAreaCode = data.NotificationTextAreaCode;
$scope.NotificationMethods.NotificationTextPhoneNumber = data.NotificationTextPhoneNumber;
$scope.NotificationMethods.NotificationVoiceAreaCode = data.NotificationVoiceAreaCode;
$scope.NotificationMethods.NotificationVoicePhoneNumber = data.NotificationVoicePhoneNumber;
$scope.NotificationMethods.NotificationVoiceExtension = data.NotificationVoiceExtension;
}
Figured it out. I was declaring the controller on the view used in ng-include. Removing that and letting the view inherit controller from surrounding view solved issue.
I am trying to dynamically add a form input in AngularJS every time the add button is clicked. However, with the code I have, it the input elements don't display at all. I simply see the "Post" button. If I remove the ng-repeat="ingredient in ingredients", the form displays (as expected). What am I doing wrong here?
Here is the specific code in index.ejs:
<form ng-model="recipe">
<div class="form-inline" ng-repeat="ingredient in ingredients">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" ng-model="ingredient.name"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Quantity" ng-model="ingredient.quantity"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Unit" ng-model="ingredient.unit"></input>
</div>
<div class="form-group">
<button type="button" id="add" ng-click="add()">Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
Here is the corresponding js code:
app.controller('MainCtrl', [
'$scope',
'posts',
'auth',
function($scope, posts, auth){
$scope.ingredients = [];
$scope.add = function() {
var newItemNo = $scope.ingredients.length+1;
$scope.ingredients.push({'id':'choice'+newItemNo});
};
}]);
That's because your button is in the ng-repeated element. ng-repeat repeats the HTML inside the element it is assigned to. Since you have no items in ingredients, nothing is rendered - including your button
Just move your button out of <div class="form-inline">.
Your add button is inside the ng-repeat, so it's never shown, so you can never populate the array, so it can't ever show. Does that make sense?
Try
<form ng-model="recipe">
<div class="form-inline" ng-repeat="ingredient in ingredients">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" ng-model="ingredient.name"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Quantity" ng-model="ingredient.quantity"></input>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Unit" ng-model="ingredient.unit"></input>
</div>
</div>
<div class="form-group">
<button type="button" id="add" ng-click="add()">Add</button>
</div>
<button type="submit" class="btn btn-primary">Post</button>
</form>
I'm trying to create a three page wizard in angular JS, with the final part taking payment details.
However, looking through the Stripe docs I notice that there are no name attributes on any of the form elements related to Stripe.
At the moment I'm using buttons to link to the next step in the wizard, and only have a single form, which is submitted together. The three page wizard is based on this tutorial:
https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router
as you can see i'm using:
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.payment" class="btn btn-danger">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
to navigate to the next form page.
My question is - how can i submit both the objects bound to the model (formData), and the Stripe data from within the same form. Is this possible?
If so - how can i do this and still keep the wizard functionality?
Below is my controller:
angular.module('formApp')
.controller('formController', ['$scope', 'Appointment', function($scope, Appointment) {
// we will store all of our form data in this object
$scope.formData = {};
$scope.formData.appintment_date = "";
$scope.opened = false;
/*$scope.momentDate = moment($scope.formData.date);*/
$scope.time1 = new Date();
$scope.showMeridian = true;
//Datepicker
$scope.dateOptions = {
'year-format': "'yy'",
'show-weeks' : false,
'show-time':true
};
// function to process the form
$scope.processForm = function() {
console.log($scope.formData);
var date = moment($scope.formData.date).format("dddd, MMMM Do YYYY, h:mm:ss a");
/*console.log(date);*/
var app = new Appointment($scope.formData);
//console.log(app);
app.$save();
};
}]);
home.html
<div class="page-header text-center">
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref=".date"><span>1</span> Date</a>
<a ui-sref-active="active" ui-sref=".address"><span>2</span> Address</a>
<a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
</div>
</div>
<!-- use ng-submit to catch the form submission and use our Angular function -->
<form id="signup-form" ng-submit="processForm()">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
form-interests.html
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" ng-model="formData.name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" name="email" ng-model="formData.email" required>
</div>
<div class="form-group">
<label for="email">Address</label>
<input type="text" class="form-control" name="address" ng-model="formData.address_1" placeholder="e.g. Unit and Street"required>
<input type="text" class="form-control" name="address" ng-model="formData.city" placeholder="City e.g. Toronto">
<input type="text" class="form-control" name="address" ng-model="formData.postcode" placeholder="Postal Code" required>
</div>
<div class="form-group">
<label for="email">Phone Number</label>
<input type="text" class="form-control" name="address" ng-model="formData.phone" placeholder="(416) - 222 5555"required>
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.payment" class="btn btn-danger">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
form-payment.html - note the lack of name attributes.
<!-- form-payment.html -->
<span class="payment-errors"></span>
<div class="form-group">
<label for="card_number">Card Number</label>
<input type="text" class="form-control" size="20" data-stripe="number"/>
</div>
<div class="form-row">
<label for="CVC"> CVC</label>
<input type="text" class="form-control" size="4" data-stripe="cvc"/>
</div>
<div class="form-row">
<label for="exp_month"> Expiration (Month)</label>
<input type="text" class="form-control" size="2" data-stripe="exp-month"/>
<label for="exp_month"> Expiration (Year)</label>
<input type="text" class="form-control" size="4" data-stripe="exp-year"/>
</div>
<div class="text-center">
<span class="glyphicon glyphicon-heart"></span>
<h3>Thanks For Your Money!</h3>
<button type="submit" id="submitButton" class="btn">Submit</button>
</div>