Did you guys have any luck setting up Skeuocard (http://kenkeiter.com/skeuocard/) in your AngularJS apps? I basically copied the example code, along with JS, installed it through bower and I am keep getting this:
TypeError: Cannot read property 'length' of undefined
at Skeuocard._importImplicitOptions (http://127.0.0.1:9000/lib/skeuocard/javascripts/skeuocard.min.js:1:4226)
at new Skeuocard (http://127.0.0.1:9000/lib/skeuocard/javascripts/skeuocard.min.js:1:1162)
at new controller (http://127.0.0.1:9000/js/modules/OtherDirectives.js:98:32)
at invoke (http://127.0.0.1:9000/lib/angular/angular.js:3760:17)
at Object.instantiate (http://127.0.0.1:9000/lib/angular/angular.js:3771:23)
at http://127.0.0.1:9000/lib/angular/angular.js:6881:28
at http://127.0.0.1:9000/lib/angular/angular.js:6268:34
at forEach (http://127.0.0.1:9000/lib/angular/angular.js:329:20)
at nodeLinkFn (http://127.0.0.1:9000/lib/angular/angular.js:6255:11)
at http://127.0.0.1:9000/lib/angular/angular.js:6529:13
My init code looks like this:
var card = new Skeuocard($("#skcard"));
My template:
<div id="skcard" class="credit-card-input no-js margin_auto">
<p class="no-support-warning">Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades...
<label for="cc_type">Card Type</label>
<select name="cc_type">
<option value="">...</option>
<option value="visa">Visa</option>
<option value="discover">Discover</option>
<option value="mastercard">MasterCard</option>
<option value="maestro">Maestro</option>
<option value="jcb">JCB</option>
<option value="unionpay">China UnionPay</option>
<option value="amex">American Express</option>
<option value="dinersclubintl">Diners Club</option>
</select>
<label for="cc_number">Card Number</label>
<input id="cc_number" type="text" name="cc_number" placeholder="XXXX XXXX XXXX XXXX" maxlength="19" size="19"/>
<label for="cc_exp_month">Expiration Month</label>
<input id="cc_exp_month" type="text" name="cc_exp_month" placeholder="00"/>
<label for="cc_exp_year">Expiration Year</label>
<input id="cc_exp_year" type="text" name="cc_exp_year" placeholder="00"/>
<label for="cc_name">Cardholder's Name</label>
<input id="cc_name" type="text" name="cc_name" placeholder="John Doe"/>
<label for="cc_cvc">Card Validation Code</label>
<input id="cc_cvc" type="text" name="cc_cvc" placeholder="123" maxlength="3" size="3"/>
</p>
</div>
Any ideas for this?
Thanks
After 3 days of debugging, trying, and beating my head against the wall, I have fount the problem. The bloody HTML2JADE converted converted the whole thing into paragraph, that's why it wasn' working... with this code, it works:
<div id="skeuocard" class="credit-card-input no-js margin_auto">
<p class="no-support-warning">Either you have Javascript disabled, or you're using an unsupported browser, amigo! That's why you're seeing this old-school credit card input form instead of a fancy new Skeuocard. On the other hand, at least you know it gracefully degrades...</p>
<label for="cc_type">Card Type</label>
<select name="cc_type">
<option value="">...</option>
<option value="visa">Visa</option>
<option value="discover">Discover</option>
<option value="mastercard">MasterCard</option>
<option value="maestro">Maestro</option>
<option value="jcb">JCB</option>
<option value="unionpay">China UnionPay</option>
<option value="amex">American Express</option>
<option value="dinersclubintl">Diners Club</option>
</select>
<label for="cc_number">Card Number</label>
<input id="cc_number" type="text" name="cc_number" placeholder="XXXX XXXX XXXX XXXX" maxlength="19" size="19"/>
<label for="cc_exp_month">Expiration Month</label>
<input id="cc_exp_month" type="text" name="cc_exp_month" placeholder="00"/>
<label for="cc_exp_year">Expiration Year</label>
<input id="cc_exp_year" type="text" name="cc_exp_year" placeholder="00"/>
<label for="cc_name">Cardholder's Name</label>
<input id="cc_name" type="text" name="cc_name" placeholder="John Doe"/>
<label for="cc_cvc">Card Validation Code</label>
<input id="cc_cvc" type="text" name="cc_cvc" placeholder="123" maxlength="3" size="3"/>
</div>
Related
So in AngularJS i was using the following to show specific form elements based on a value that is captured by a model:
<fieldset class="full-width sm-padding">
<label>Do you have any major medical conditions such as
heart conditions, cancer or diabetes?</label>
<div class="inline-flex">
<input type="radio" name="medicalCondition" value="yes"
tabindex="16" ng-model="clientDetails.medicalCondition">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="medicalCondition" value="no"
tabindex="17" ng-model="clientDetails.medicalCondition">No<br>
</div>
</fieldset>
<fieldset class="full-width sm-padding" ng-
if="clientDetails.medicalCondition == 'yes'">
<label>Are you currently taking any medication or do you
have any other medical conditions? For example HBP, Cholesterol, Asthma,
Depression? (Both lives if cover for couple)</label>
<div class="inline-flex">
<input type="radio" name="otherMedicalCondition"
value="yes" tabindex="18" ng-
model="clientDetails.otherMedicalCondition">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="otherMedicalCondition"
value="no" tabindex="19" ng-
model="clientDetails.otherMedicalCondition">No<br>
</div>
</fieldset>
How can I do the same thing in Angular 2?
Have tried this but not working:
<fieldset class="full-width sm-padding">
<label>Do you smoke?</label>
<div class="inline-flex">
<input type="radio" name="smoker" value="yes"
tabindex="12" [(ngModel)] = "clientDetails.smoker">Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="smoker" value="no" tabindex="13" [(ngModel)] = "clientDetails.smoker">No<br>
</div>
</fieldset>
<div class="full-width flex" *ngIf="clientDetails.smoker ===
'Yes'">
<fieldset class="one-quarter sm-padding">
<label>What do you smoke?</label>
<input list="whatDoYouSmoke" name="whatDoYouSmoke"
tabindex="14">
<datalist id="whatDoYouSmoke">
<option value="Cigarettes">
<option value="Cigars">
<option value="Pipe">
<option value="E-Cigs">
<option value="Other">
</datalist>
</fieldset>
<fieldset class="one-quarter sm-padding">
<label>How many per day?</label>
<input type="number" min="0" name="howManySmokesPerDay"
tabindex="15">
</fieldset>
</div>
What am I doing wrong?
Have tried so many different options but can't quite get it to work!
thanks
The only thing I can see is that you have typed [(ngModel)] = "", try without spaces like: [(ngModel)]="". Also noticed that in your *ngIf="clientDetails.smoker ===
'Yes'", try with a little 'y' in yes as: *ngIf="clientDetails.smoker ===
'yes'". Since you are setting the value to "yes" and not "Yes" in your radio button.
There is a case problem in the Angular version. The first 'yes' starts with a lower case y and a second 'Yes' with a upper case Y.
For anyone out there looking for a solution to this, I ended up doing the following:
<fieldset class="full-width sm-padding">
<label>Do you smoke?</label>
<div class="inline-flex">
<input type="radio" name="smoker" [(ngModel)]="smoker"
[value]="true" [checked]="smoker" /> Yes<br>
</div>
<div class="inline-flex">
<input type="radio" name="smoker" [(ngModel)]="smoker"
[value]="false" [checked]="!smoker" /> No<br>
</div>
</fieldset>
<div class="full-width flex" *ngIf="smoker">
<fieldset class="one-quarter sm-padding">
<label>What do you smoke?</label>
<input list="whatDoYouSmoke" name="whatDoYouSmoke" tabindex="14">
<datalist id="whatDoYouSmoke">
<option value="Cigarettes">
<option value="Cigars">
<option value="Pipe">
<option value="E-Cigs">
<option value="Other">
</datalist>
</fieldset>
<fieldset class="one-quarter sm-padding">
<label>How many per day?</label>
<input type="number" min="0" name="howManySmokesPerDay"
tabindex="15">
</fieldset>
</div>
As said above, my site, which uses Angular JS and Bootstrap, has form validation errors when accessed from Safari or IE9, despite the use of Webshim. However, other attributes of webshim's form module, such as placeholder text, do work.
When an attempt is made to submit the form without all required fields filled, the error returned in the console is:
SCRIPT438: Object doesn't support property or method 'swap'
on IE9 and:
TypeError: undefined is not a function (evaluating '$.swap')
on Safari.
The following is the relevant code from my index.html file:
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/webshim/js-webshim/dev/polyfiller.js"></script>
<script>
webshim.setOptions('forms', {
lazyCustomMessages: true
});
webshim.polyfill('forms forms-ext filereader');
</script>
And one of the forms where this problem is encountered:
<form name="reg.regForm" class="form-signin" ng-submit="submit()">
<br>
<input class="form-control input-lg" placeholder="Email Address" name="email" type="email"
ng-model="reg.model().emailAddress" required="required"
title="Please enter a valid email address"> <!--Email Address-->
<input class="form-control input-lg" placeholder="Re-type Email Address" name="verifyEmail" type="email"
ng-model="reg.model().verifyEmailAddress" required="required"
title="Please enter a valid email address"> <!--Verify Email Address-->
<input class="form-control input-lg" placeholder="First name" type="text"
ng-model="reg.model().firstName" required="required"> <!--First Name-->
<input class="form-control input-lg" placeholder="Last name" type="text"
ng-model="reg.model().lastName" required="required"> <!--Last Name-->
<div class="input-group"> <!--Gender-->
<select class="form-control input-lg" ng-model="reg.model().gender"
ng-style="reg.model().gender === 'Gender' && {'color':'darkgrey'}"
ng-change="reg.noGenderAnswer=false;">
<option style="color:black">Male</option>
<option style="color:black">Female</option>
<option style="color:black">Other</option>
<option hidden="true" disabled style="color:darkgray">Gender</option>
</select>
<span class="input-group-addon input-group-lg"
ng-style="reg.model().gender != 'Gender' && {'background-color':'white'}">
<input type="checkbox" ng-model="reg.noGenderAnswer" ng-click="reg.model().gender='Gender'"
ng-disabled="reg.noGenderAnswer">
</span>
<span class="input-group-addon input-group-lg"
ng-style="reg.model().gender != 'Gender' && {'background-color':'white'}">
I choose not to answer.
</span>
</div>
<div class="input-group"> <!--Year of Birth-->
<select class="form-control input-lg" ng-model="reg.model().birthdate" style="border-top:0px;"
ng-style="reg.model().birthdate === 'Year of Birth' && {'color': 'darkgrey'}"
ng-change="reg.noBirthYear=false;"
ng-options="possibleBirthYear as possibleBirthYear for possibleBirthYear in reg.possibleBirthYears">
<option hidden="true" disabled value="" style="color:darkgray">
Year of Birth
</option>
</select>
<!--<select class="form-control input-lg" ng-model="reg.model().birthdate"
ng-style="reg.model().birthdate === 'Year of Birth' && {'color': 'darkgrey'}"
ng-change="reg.noBirthYear=false;">
<option ng-repeat="possibleBirthYear in reg.possibleBirthYears"
style="color:black" ng-value="possibleBirthYear">
{{possibleBirthYear}}
</option>
<option hidden="true" value="Year of Birth" style="color:darkgray">
Year of Birth
</option>
</select>-->
<span class="input-group-addon input-group-lg" style="border-top:0px;"
ng-style="reg.model().birthdate != 'Year of Birth' && {'background-color':'white'}">
<input type="checkbox" ng-model="reg.noBirthYear" ng-click="reg.model().birthdate='Year of Birth'"
ng-disabled="reg.model().birthdate === 'Year of Birth'">
</span>
<span class="input-group-addon input-group-lg" style="border-top:0px;"
ng-style="reg.model().birthdate != 'Year of Birth' && {'background-color':'white'}">
I choose not to answer.
</span>
</div>
<input class="form-control input-lg" name="password" placeholder="Password" type="password"
ng-model="reg.model().password" required="required" ng-minlength="6" style="border-top:0px;"> <!--Password-->
<input class="form-control input-lg" ng-model="reg.verifyPassword"
placeholder="Re-type Password" type="password" name="verifyPassword"
ui-validate="{verify:'$value === reg.model().password'}"
ui-validate-watch=" 'reg.model().password' "> <!--Verify Password-->
<button class="btn btn-primary center-block btn-lg" type="submit">
Continue
</button>
</form>
We are using Angular v1.2.29, Bootstrap v3.1.1, Webshim v1.15.10, and JQuery v2.2.3.
EDIT: Other aspects of webshim's forms module (such as placeholder text) do work, and do stop working if the webshim code is removed.
EDIT2: Some progress: Adding the class 'ws-validate' to the form causes validation to work partially; in IE, the first non-filled field is focused, and in all other browsers tested (including those where validation works), the text 'Please fill out this field.' is added below the form in red. I am pursuing this avenue.
I want to create my custom directive data-from .
data-from="id-employee"
the attribute "data-from" indicates that the inputs of this fieldset must contains the values of the fieldsets which id start with "id-employee"
the user should be able to select a leader from the list of the employee.
Any ideas??
Thanks in advance !!
<form>
<fieldset id="id-employee[0]">
<input type="text" name="name-employee[0]"/>
<input type="text" name="lastname-employee[0]"/>
</fieldset>
<fieldset id="id-employee[1]">
<input type="text" name="name-employee[1]"/>
<input type="text" name="lastname-employee[1]"/>
</fieldset> <fieldset id="id-employee[2]">
<input type="text" name="name-employee[2]"/>
<input type="text" name="lastname-employee[2]"/>
</fieldset>
<fieldset id="id-leader" data-from="id-eployee">
<select id="select-employee">
<option>Select a Team leader</option>
<option id="select-employee-0" value="0">name lastname of the employee 0</option>
<option id="select-employee-0" value="1">name lastname of the employee 1</option>
<option id="select-employee-0" value="2">name lastname of the employee 2</option>
</select>
<input type="text" name="name-leader"/>
<input type="text" name="lastname-leader"/>
</fieldset>
</form>
You can use data binding to achieve this like -
<form ng-init="employees=[]">
<fieldset id="id-employee[0]">
<input type="text" model="employees[0].name" name="name-employee[0]"/>
<input type="text" model="employees[0].lastname" name="lastname-employee[0]"/>
</fieldset>
and then bind it in select
<select ng-model="leader" ng-options="employee.name as employee.name for employee in employees"></select>
I have following code:
<form name="reviewForm_{{$index}}" ng-controller="reviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)" novalidate>
<blockquote class="newReview">
<b>Stars {{reviewCtrl.review.stars}}</b>
<p>{{reviewCtrl.review.comment}}</p>
<cite>{{reviewCtrl.review.author}}</cite>
</blockquote>
<select class="form-control" ng-model="reviewCtrl.review.stars">
<option value="1">1 star</option>
<option value="1">2 stars</option>
<option value="1">3 stars</option>
<option value="1">4 stars</option>
<option value="1">5 stars</option>
</select><br />
<textarea ng-model="reviewCtrl.review.comment" required></textarea>
<label>by:</label>
<input type="text" ng-model="reviewCtrl.review.author" required /><br />
<div>reviewForm is {{reviewForm_$index.$valid}}</div>
<input class="btn btn-primary btn-large" type="submit" value="Submit" />
</form>
The Form above lies within a ng-repeat and has the name reviewForm_$index.
That works fine. So it will give reviewForm_0, reviewForm_1 and so on.
Now I would like to check if the form is valid with {{reviewForm_$index_$valid}}.
For some reason it doesn't show anything.
Do I have the wrong syntax?
Actually you are trying to access a property that does not exists since reviewform_$index will be treated as a form name not a variable. So change your code to something like this:
<div>reviewForm is {{reviewCtrl['reviewForm_' + $index].$valid}}</div>
That will work!!
Ok, I got it to work thanks to #klode.
Here my solution:
<form name="reviewForm" ng-controller="reviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)" novalidate>
<blockquote class="newReview">
<b>Stars {{reviewCtrl.review.stars}}</b>
<p>{{reviewCtrl.review.comment}}</p>
<cite>{{reviewCtrl.review.author}}</cite>
</blockquote>
<select class="form-control" ng-model="reviewCtrl.review.stars">
<option value="1">1 star</option>
<option value="2">2 stars</option>
<option value="3">3 stars</option>
<option value="4">4 stars</option>
<option value="5">5 stars</option>
</select><br />
<textarea ng-model="reviewCtrl.review.comment" required></textarea>
<label>by:</label>
<input type="text" ng-model="reviewCtrl.review.author" required /><br />
<div>reviewForm is {{reviewForm.$valid}}</div>
<input class="btn btn-primary btn-large" type="submit" value="Submit" />
</form>
As explained by Klode can I leave the form name without the $index trailer and address the form's $valid property each loop via it's name just so: reviewForm.$valid
i have a form with two differently named ng-models. I need to pass both of them with the form. How would this work? I need to pass currentItem + currentItem.Customer I am having trouble with a PdfSharp controller and I want to see if this is the reason why the Customer Values are being passed back as Null.
controller
$scope.EmailPdf = function () {
var id = $scope.currentItem.JobId
$http.get('/api/Pdf/' + id).success(function () {
$scope.PrintPreviewModal();
});
}
form
<form ng-submit="submitJob()" enctype="multipart/form-data" name="myForm">
<fieldset>
<div class="col-xs-12">
<label>Number:</label>
<input ng-model="currentItem.JobNumber" type="text" name="JobNumber">
<label>Customer:</label>
<input type="text" ng-model="currentItem.Customer.CustomerName"
typeahead="customer.CustomerName for customer in customerArray | filter:$viewValue"
typeahead-on-select="selectEditCustomer($item)">
</div>
<input ng-model="currentItem.CustomerId" type="text" ng-hide="true"/>
<div class="inline-fields">
<label >Status:</label>
<selectng-model="currentItem.JobStatus">
<option value="" selected="selected">Select</option>
<option value="Active">Active</option>
<option value="InActive">InActive</option>
<option value="Complete">Complete</option>
</select>
<label>Address:</label>
<input ng-model="currentItem.Customer.CustomerAddress" type="text">
</div>
<div class="inline-fields">
<label>Name:</label>
<input ng-model="currentItem.JobName" type="text">
<label>City:</label>
<input ng-model="currentItem.Customer.CustomerCity" type="text">
<label>St:</label>
<inputng-model="currentItem.Customer.CustomerState" type="text">
<label>Zip:</label>
<input ng-model="currentItem.Customer.CustomerZipcode" type="text">
</div>
<div class="inline-fields">
<label>Address:</label>
<input ng-model="currentItem.JobAddress" type="text">
<label>Ph:</label>
<input ng-model="currentItem.Customer.CustomerPhoneNumber" type="text">
<label>Fax:</label>
<input disabled style="width: 105px"ng-model="currentItem.Customer.CustomerFaxNumber" type="text">
</div>
<input ng-click="EmailPdf(currentItem)" type="button" value="Email" />
Well it's a bit difficult to tell exactly what you are asking here, but it sounds like you mean that you need to pass more information than the ID into your get. So you can pass the entire currentItem with all it's content like this
$http.get('/api/Pdf/' + id,angular.toJson($scope.currentItem)).....
Is that what you are trying to do?