Hello I am building an angular application and I have a problem inside my stripe form. Basically I send data such as card number, expiry date and CVC code from the view to the controller's stripe callback, but I would like to add also the amount of money to pay. So I added this into my form:
<form stripe-form="handleStripe" name="myForm">
<!-- input added for the price -->
<div class="row" ng-if="!unregistered_user">
<div class="input-field col col-xs-12">
<label for="name">Amount </label>
<input name='price' type="number" id="amount" ng-model="price">
</div>
</div>
<!-- credit/debit card form -->
<div class="row">
<div class="input-field col col-xs-12">
<label for="cardn">Card number</label>
<input type="text" name="number" id="cardn" ng-model="number" payments-validate="card" payments-format="card" payments-type-model="type" ng-class="myForm.number.$card.type"/>
</div>
</div>
<div class="row">
<div class="input-field col-xs-6">
<label for="exp">Expiry</label>
<input type="text" id="exp" ng-model="expiry" payments-validate="expiry" payments-format="expiry" />
</div>
<div class="input-field col-xs-6">
<label for="cvc">CVC</label>
<input type="text" id="cvc" ng-model="cvc" payments-validate="cvc" payments-format="cvc" payments-type-model="type"/>
</div>
</div>
<div class="row">
<div class="input-field col-xs-12">
<button type="submit" class="btn btn-primary btn-large">Pay {{ price }}</button>
</div>
</div>
</form>
In the controller I have this variable:
▸ $scope.price = 0;
When I first load the page I can see that the price input has exactly the same amount that I put in the variable $scope.price. But when I changed it in the page and submit the form, $scope.price is always 0.
It's like the data is being passed from the controller to the view, but not the way back from the view to the controller.
How can I solve this?
I think your issue is with ng-if that wraps your input with price model. ng-if creates its own scope and in your case the price is connected with the scope inside ng-if and not with you controller.
You could use ng-show instead, or set the model like this: ng-model = "$parent.price" or use controllerAs syntax and you don't have to worry about this issue anymore.
Related
I have a form1 and a add button. The thing I want is to add same form as form2 below form1 on clinking add button. As I am new to Angular Js it will be very helpful if someone can help me out.
HTML
<div class="row">
<header class="panel-heading">
<h5 class="panel-title" style="padding-left: 1.5rem;">
<b>APPLICANTS</b>
<input class="btn btn-primary" style="float:right " type="button" value="Add" />
</h5>
<hr>
</header>
<div class="panel-body">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Name</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtFullName">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Nationality</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtNationality">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Pin Code</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtPincode">
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">House No.</label>
<div>
<input type="text" class="form-control" id="inputDefault" ng-model="txtHouseNo">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to create an array of applicants model objects, let's call it applicantsArray, where every object will represent a single applicant form.
You need to initialize this array with one model empty on page load.
Then you need to wrap your form with ng-for and iterate over every applicant model. So the n-th form will be binded with the n-th model in the applicantsArray.
Last step will be to push an empty applicant model to applicantsArray when 'Add' is clicked. Then a new model is added and the DOM will render additional form for the new model.
I am just learning Laravel and following the Laravel 5.7 from scratch (I am using 5.8)course from Laracasts.
We create a new controller that should handle tasks associated with a project. We show the tasks on the details page for the particular project. All of this works so far. Then, we add a checkbox that indicates when a task has been completed. The checkbox is in a form that submits on change.
This is my form code.
#section('content')
<div class ="col col-md-6">
<form action="/tasks/{{$task->id}}" method="POST">
#method("PATCH")
#csrf
<label class = "checkbox" for="completed">Completed</label>
<input type="checkbox" name="completed" onChange="this.form.submit()">
</form>
</div>
#endsection
Currently, in my Controller, I have the function but am just trying to see if it is hitting the function so I die and dump. Or that is what it should do anyway..
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ProjectTasksController extends Controller
{
public function update(){
dd("hello");
}
}
And, in my web.php file, this is how I have my route set up.
Route::patch('/tasks/{task}', 'ProjectTasksController#update');
Yet, it is not working. When I check one of the checkboxes, the URL changes to this
http://127.0.0.1:8000/projects/1?_method=PATCH&_token=0menrjzIOdiSn0SEu51unY114oKU8kZ2i2B5zy4p&completed=on
So, it is like it is not hitting the route though the route is defined. I don't know what I am doing wrong as I have done exactly what is being done in the video and so I am stuck.
Can someone tell me what is wrong with this?
change patch to post
Route::patch('/tasks/{task}', 'ProjectTasksController#update');
to
Route::post('/tasks/{task}', 'ProjectTasksController#update');
and then add parameter
public function update(){
dd("hello");
}
to
public function update($task){
dd("hello");
}
php artisan route:clear
php artisan route:cache
php artisan config:clear
Seems like an issue with the route cache, have your tried clearing your cache using artisan?
php artisan route:clear
php artisan config:clear
php artisan view:clear
php artisan cache:clear
These are the 4 commands to clear all the cache Laravel may have for your configs, routes and views.
Check if you have a form inside a form or rather a form component is wrapped in with other form tags; I had the same problem.
You may find out in the parent blade you have a form and the child(medical-info-components.payment) blade that is alone has a form also.
<div>
<fieldset>
#if ($stripe)
<div class="card-body">
<script src="https://js.stripe.com/v3/"></script>
<hr>
<div class="col-md-12">
<div class="card">
<div class="card-body">
<strong class="text-bold" style="font-size:20px;">Make Payment of
{{$currency}} {{$price}}
</strong>
<br>
<strong style="font-size:20px;">Please make payments by entering
your Credit or Debit
Card</strong>
</div>
</div>
</div>
<div class="col-md-6" style="float:right;">
<form action=" {!! action('\App\Http\Controllers\PaymentController#store') !!}" method="POST"
id="payment-form" ata-cc-on-file="false"
data-stripe-publishable-key="{{env('pk_test_')}}"
enctype="multipart/form-data">
#csrf
{{-- <input type="hidden" class="" name="stripeToken" id="stripeToken" wire:model.lazy="stripeToken" /> --}}
<div class="form-row">
<label for="card-element">
Your Name
</label>
<input type="text" name="name" class="form-control" wire:model.lazy='name'
placeholder="Enter Your Name" id="">
<label for="card-element">
Your Payable Amount
</label>
<input type="text" name="grandTotal" class="form-control" wire:model.lazy='amount'
placeholder="Enter Your Amount" id="">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element" class="form-control">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<input type="button" class="previous action-button-previous btn btn-dark"
style="margin-left: -11rem; margin-top:15px;" value="Previous" wire:click='previousStep' />
<input type="submit" class="next action-button btn btn-primary"
style="float:right; margin-top:15px;" value="Confirm" />
</form>
</div>
</div>
#elseif($paypal) #elseif($mpesa) #endif
<div class="row">
<div class="col-md-12">
</div>
</div>
</fieldset>
And then inside the mother component, you may have this
<div>
<!-- call -->
<section class="slice">
<div class="container" id="grad1">
<div class="row justify-content-center mt-0">
<div class="col-12 text-center p-0 mt-3 mb-2">
<div class="card px-0 pt-4 pb-0 mt-3 mb-3 border-0 rounded-lg">
<div class="card-body px-5">
<div class="row">
<div class="col-md-12 mx-0">
{{-- <form id="msform"> --}}
<!-- progressbar -->
#livewire('medical-info-components.payment')
{{-- </form> --}} <!--You see here we have form wrapping our component that has form, you need to take it down-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Here i am creating a listing form where the user can list there data after logging into the website.I want to add username also when the user submit the form.In the listing form i have used a input type=hidden in which i have put the username.
I want to add this username value to my lisitng model and pass the value of model to the database
I want to bind the value of hidden field of my template driven form to the model of my angular application
I am getting this username from the api
Below is my angular6 template driven form
<form #listingForm="ngForm" (ngSubmit)="OnSubmit(listingForm)" style="margin-top:100px">
<div class="container">
<div class="row">
<div class=" col-md-offset-1 col-md-10 col-md-offset-1" style="padding-top:35px;margin:0 auto;box-shadow: 1px 2px 6px 0px rgba(102,102,102,0.73);">
<h3 style="color:black">Add Your Listing Here</h3>
<hr>
<div *ngIf="userClaims">
<input type="hidden" #Username="ngModel" [(ngModel)]="userClaims.Username" [value]="list.Username" name="Username">
</div>
<div class="row" style="padding-top:50px;">
<div class="col-sm-6">
<label for="">Business Name</label>
<input type="text" #BName="ngModel" [(ngModel)]="list.BName" name="BName">
</div>
<div class="col-sm-6">
<label for="">Business Tagline</label>
<input type="text" #BTagline="ngModel" [(ngModel)]="list.BTagline" name="BTagline">
</div>
</div>
<div class="clearfix">
<button type="submit" class="signupbtn" >Sign Up</button>
</div>
</div>
</div>
</div>
</form>
Below is my listing.model.ts
export class Listing {
}
I am getting the Username from the other services of my application
why don't you assign userClaims.Username to list.Username in ts file itself and make it simple
<input type="hidden" #Username="ngModel" [(ngModel)]="list.Username" name="Username">
You can remove the above hidden input also since it will not impact on anything.
By Using the below method i am able to bind the value
<input type="hidden" #Username="ngModel" [(ngModel)]="userClaims.Username"
name="Username">
I am using a bootstrap datepicker. when i click on the icon date& time automatically enters into the input. but the input remained as invalid since i did not interacted with it directly. has any one faced this problem.
here is the plnkr for that: http://plnkr.co/edit/yBmwZCCPvTOQWE6q3BW5
view
<body data-ng-controller="ReservationController as resvnCtrl">
<div class="container">
<div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-12 col-xs-12 ">
<div>
<h2 class="text-center page-heading">Make a reservation</h2>
</div>
<div>
<form role="form" name="resvnCtrl.form" data-ng-submit="resvnCtrl.submitForm(resvnCtrl.form.$valid)" novalidate>
<div class="form-group" data-ng-class="{'has-error':resvnCtrl.form.time.$invalid && (resvnCtrl.form.time.$dirty || resvnCtrl.form.$submitted) }">
<label class="control-label">Date-Time</label>
<div class='input-group date' id='datetimepicker'>
<input type="text" name="time" id="time" data-ng-model="resvnCtrl.reservation.time"
placeholder="Enter Desired Time" class="form-control" required>
<span class="input-group-addon pointer" data-date-picker>
<i class="fa fa-calendar"></i>
</span>
</div>
<div data-ng-messages="resvnCtrl.form.time.$error" data-ng-if="resvnCtrl.form.time.$dirty || resvnCtrl.form.$submitted">
<p class="help-block" data-ng-message="required">Date and Time required</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<input type="submit" name="submit" id="submit" value="Make Reservation" class="btn btn-primary btn-block " >
</div>
</div>
</form>
</div>
</div>
</div>
</body>
controller
var app = angular.module('plunker', []);
angular.module('plunker')
.controller('ReservationController',ReservationController);
ReservationController.$inject=['$scope'];
function ReservationController($scope) {
var resvnCtrl=this;
resvnCtrl.reservation={};
resvnCtrl.confirmation={};
$('#datetimepicker').datetimepicker();
resvnCtrl.submitForm=function(isValid){
alert("valid:"+resvnCtrl.form.time.$valid);
}
}
I think you can refer to angular-strap:http://mgcrea.github.io/angular-strap/#/datepickers. when you import angular-strap.min.js, angular-strap.tpl.min.js and libs.min.css to your index.html. your app.js should be like this:
var app = angular.module('plunker', ['mgcrea.ngStrap.datepicker']);
That's the curse of usage jQuery within angular. Your models controller updates only $viewValue when plugin initialized and that does not trigger digest. Digest triggered my another action - focus in or out that is run digest.
Solution for this is watcher that will manually set $modelValue by $setViewValue() method so angular will know something happened and update validation.
And please, create separate directive for datepicker that will initialize it on element you used directive on.
I want to disable all the form components so that it can't be edited when view button is clicked.
this is my form
<form action="#" class="form-horizontal" >
<div class="form-group">
<label for="fieldname" class="col-md-3 control-label">Name</label>
<div class="col-md-6">
<input type="text" ng-model="newItem.customSelected" typeahead="name as name.name for name in members | filter:{name:$viewValue}" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="fieldhname" class="col-md-3 control-label">House name</label>
<div class="col-md-6">
<input type="text" ng-model="newItem.customSelected1" typeahead="house_name as house_name.house_name for house_name in family | filter:{house_name:$viewValue}" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="" class="col-md-3 control-label"><?php echo $this->lang->line('label_family_id'); ?></label>
<div class="col-md-6">
<input type="text" ng-model="newItem.customSelected2" typeahead="fm as fm.family_reg_no for fm in family | filter:{family_reg_no:$viewValue}" class="form-control" />
</div>
</div>
<div class="col-md-3"></div>
</form>
and this is my button
<input type="button" class="finish btn-success btn" ng-click="view(newItem)" value="view"/>
Rather than handling it at per-field level, you can put all form elements into fieldset and use ng-disabled to disable the whole fieldset.
you can use fieldset tag by surrounding your buttons with a fieldset and using ng-disabled attribute:
<form action="#" class="form-horizontal" >
<fieldset ng-disabled="isClicked">
<!--your form here --!>
</fieldset>
</form>
now all that left is in the view(newItem) function do:
$scope.view = function(newItem){
$scope.isClicked = true;
// Your code here and set it to false when your are done with it
}
You could use an overlay and have a ng-show on it or you could add to each input ng-disabled
Set a scope variable when the view button is clicked.
Use ng-disabled in combination with the scope variable to disable the fields.