I'm trying to create a script type of text/ng-template to put my error messages template into $templateCache. I want this script file to be remote, in it's own file outside of the HTML.
<script type="text/ng-template" id="error-messages">
<span ng-message="required">This field is required.</span>
<span ng-message="min">This number must be larger than {{min}}.</span>
<span ng-message="max">This number must be smaller than {{max}}.</span>
<span ng-message="number">A number is required.</span>
<span ng-message="date">A date is required.</span>
</script>
Then in the HTML I want to reference this template that I believe should be in $templateCache and I can access it by Id.
<form name="userForm">
<div class="form-group">
<label for="requiredInput">Required</label>
<input type="text" class="form-control" id="required" name="requiredInput"
ng-model="user.required" required />
<div ng-messages="userForm.requiredInput.$error" ng-messages-include="error-messages"></div>
</div>
</form>
If i put the script inline with the HTML it works just fine but I want it to be in a remote file. When I move it to a remote file my HTML is unable to find my template error-messages.
This is my first Plunker I'm sharing. Please let me know if you can't get to it.
http://plnkr.co/edit/NgSm7piaECWBab1LOmp3?p=preview
Please check the plunker - http://plnkr.co/edit/luhUuZURCOeHSuEhi11x?p=info
angular.module('app', ['ngMessages'])
.run(function ($templateCache, $http) {
$http.get('scriptTemplate.html')
.then(function(response) {
$templateCache.put('error-messages', response.data);
})
})
Load the ng-messages-include template using $http in the run phase of the application and save it in the templateCache.
Related
I am trying this ,
<div ng-form="sadadPaymentForm" class="sadadPaymentForm" ng-if="vm.isSadadEnabled" name="sadadPaymentForm" validate-popup-form>
<div ng-if="vm.isSadadEnabled">
<div class="credit-debit-card-div" ng-include="'sadadTemplate'" ng-show="vm.view_tab == 'tab7'">
</div>
</div>
</div>
<span ng-show="vm.view_tab=='tab7' && vm.isSadadEnabled">
<button type="button" class="primary inline pay-now" id="paynowbtn" ng-disabled="!vm.checked3 || vm.sadadPaymentForm.$invalid" ng-click="vm.payByVoucher();" analytics-on="click" analytics-event="uaevent" analytics-eventcategory="Payment" analytics-eventaction="PayNow"
analytics-eventlabel="Pay now">
Pay by sadad
</button>
</span>
And , my template in another html file
<script type="text/ng-template" id="sadadTemplate">
<input fieldlabel="Online Payment ID" type="text" name="onlinePaymentId" ng-model="vm.sadadpayment.onlinePaymentId" class="form-control input-type-text"
ng-model-options="{ debounce: 100 }" validationKey-required="PaymentAdress1IsRequired" required maxlength="200">
</script>
Here the vm.sadadPaymentForm.$invalid does not work but Indidual components validation works on blur on blur of input .
BUT , if I add vm to ng-form ,ie like this
<div ng-form="vm.sadadPaymentForm" class="sadadPaymentForm" ng-if="vm.isSadadEnabled" name="vm.sadadPaymentForm" validate-popup-form>
<div ng-if="vm.isSadadEnabled">
<div class="credit-debit-card-div" ng-include="'sadadTemplate'" ng-show="vm.view_tab == 'tab7'">
</div>
</div>
</div>
Here the vm.sadadPaymentForm.$invalid works but Indidual components validation fails on blur of input for eg, TypeError: Cannot read property 'onlinePaymentId' of undefined
Help me understand how can I make both individual validation and the final form validation work together.Angular Ver 1.5,cannot upgrade this now.Need a solution with 1.5.
Form name attribute should have sadadPaymentForm inspite of vm.sadadPaymentForm. Since you don't have form name specified correctly, validation is failing.
name="vm.sadadPaymentForm"
should be
name="sadadPaymentForm"
Ok found out the issue , its basically a scope issue.
replaced
ng-if="vm.isSadadEnabled"
with
ng-show="vm.isSadadEnabled"
ng-if was preventing the DOM from rendering thus killing the scope variable vm itself
I am new to Angular JS and using it as the framework for my client-side JavaScript. I want to notify the user if the form is successfully submitted using HTML element (not an alert which the user requires to click "OK" in order to continue input). I used ngShow to show the element when the form is submitted. Below is the code of the element.
<p ng-model="successMessage" ng-show="isSuccess"></p>
However, it does not suit me because I am refreshing the page after the user submitted form successfully. As you know, this will cause the variables in $scope refreshed.
$route.reload();
To overcome that, I tried to not refreshing the page. Instead, I emptied all the models on my controller. Yet, it does not work well for me because I am using Angular form validation i.e. !frmRegister.address.$pristine and frmRegister.address.$invalid for all my input. Using these, I am displaying error message if the user has touched the input element, but the input content is still not right. Below is the example.
<div class="form-group row" ng-class="{ 'has-danger' : frmRegister.name.$invalid && !frmRegister.name.$pristine }">
<label class="col-2 col-form-label">Employee Name</label>
<div class="col-10">
<input class="form-control" ng-class="{ 'form-control-danger' : frmRegister.name.$invalid && !frmRegister.name.$pristine }" type="text" placeholder="Enter name..." id="txtName" name="name" ng-model="name" ng-maxlength="50" required autofocus>
<p ng-show="frmRegister.name.$invalid && !frmRegister.name.$pristine" class="form-control-feedback">Name is required.</p>
<p ng-show="frmRegister.name.$error.maxlength" class="form-control-feedback">Name is too long.</p>
</div>
</div>
As I was not refreshing the page and only emptying the model, the error messages are raised due to the input has been touched.
How can I achieve to display a success message on submitted form using Angular? Any help would be appreciated.
If the$route.reload is important, you could also tack on ?success=true or similar to your route before the reload:
...
$route.updateParams({success:"true"});
$route.reload();
...
Inject $routeParams into your controller and check accordingly:
function Controller($scope, $routeParams) {
if($routeParams && !!$routeParams.success){
$scope.showSuccessMessage = true;
}
}
<p> tag don't support ng-model, you have to use ng-bind. and if you successfully changed value of isSuccess, I think it will showup with ng-bind.
refer the below example about ng-model and ng-bind.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app ng-init="data='test';iSuccess=true;">
<h3>Shown nothing by ng-model</h3>
<p ng-model="data" ng-show="iSuccess"></p>
<h3>Shown by ng-bind</h3>
<p ng-bind="data" ng-show="iSuccess"></p>
<button ng-click="iSuccess=!iSuccess">Toggle</button>
</div>
Well, without reloading,
you can clear your form through this code during submit.
$scope.yourFormModel = {};
$scope.yourFormName.$setPristine(true);
$scope.yourFormName.$setUntouched(true);
It will clear your form like it is untouched without refreshing the page.
Also, in your success message, use this code instead
<div ng-show="isSuccess">
{{successMessage}}
</div>
Hello everyone I need to create some dynamic forms so users can configure feeds to their specification.
I have used ng-repeat to do the following:
For each feed a user needs to configure a new tab is created
for each property a feed has a label and input textbox is created.
Markup:
<tabset>
<tab ng-repeat="feed in feeds" heading="{{feed.heading}}">
<form role="form">
<div class="row" ng-repeat="property in feed.properties">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<span>{{property.name}}</span>
</span>
<input type="text" class="form-control" value="{{property.value}}">
</div>
</div>
</div>
</form>
</tab></tabset>
This works just fine with the backing json that I have however I am wondering what the accepted way of capturing the data for this kind of use case, obviously I won't know how many feeds or properties each feed has so I suppose I need to bind this to an array in some way.
The question is how?
use ng-model
<input type="text" class="form-control" ng-model="property.value">
This way the textbox is bound to property.value. angular automatically updates property.value when you change the text in the textbox. You can use it in your JS just like any other variable. That's the beauty of angular.
I'm developing a dotnetnuke 7 module using AngularJS.
Here is my code in View.ascx:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function ($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe#gmail.com';
});
</script>
The code is copied from W3School but it seems that the AngularJS is not working well. Here is my View's screenshot:
I have tried an AngularSJ simple example and it working good likes:
<div ng-app="" ng-init="firstName='John'">
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
Why is my first block of code not working? Are there any issues regarding the "form" tag in my module?
The problem is that DNN already includes the <form> tag (via Default.aspx), and nesting form tags isn't permitted.
A solution is to use <ng-form> as a substitute. eg:
...
<div ng-app="myApp" ng-controller="validateCtrl">
<ng-form name="myForm">
<p>Username:
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</p>
</ng-form>
</div>
...
Also, you'll want to turn off HTML 5 default form validation since you're using Angular validation methods (this query works in DNN):
$(function() {
$('#Form').attr('novalidate', 'novalidate');
});
Further reading:
ngForm directive in AngularJS docs
Forms: Official AngularJS docs have better examples
Please be aware that the W3School example does not use best practices, and will introduce bad habits for the inexperienced (specifically, it doesn't include a '.' in ng-model which help avoid potential parent/child scope issues down the track. See the Forms examples in the link for a more robust approach.)
The form tag is certainly an issue when running within DNN/ASP.NET Webforms. I did a tutorial on DNNHero.com on building Angular applications as DNN modules.
Two pieces of advice:
Use a div tag to add your angular controller directives:
<div id="userForm" ng-controller="validateCtrl" ng-init="init(<%=this.ModuleId%>)">
Don't hard-code the ng-app directive in your html. Instead use the bootstrap method for attaching your app.
<script type="text/javascript">
angular.element(document).ready(function () {
var moduleContainer = document.getElementById('userForm');
angular.bootstrap(moduleContainer, ["myApp"]);
});
</script>
Can you do what you need to do with DNN through its API? It is best to think of Angular applications as completely disconnected from the server, like an iOS or Android application would be. Templating through DNN and Angular is inviting pain. Who knows what your rendered HTML looks like - I'm sure DNN/ASP.NET mangles it.
If you can leverage DNN's API the right mindset would be "I'm building an Angular application that happens to use DNN for persistence".
I am working on a problem that a client has come across, the javascript that they are using is causing a /* and /*]]>*/ to show up on the Login Tooltip. I have been looking for the cause and I am baffled by it. All I know is that it is being generated somehow by the JavaScript at This Page.
The plugin is using this template which doesn't have any of those characters in it:
<script type="text/template" id="api-login-btn-template">
<div id="api-signin">
<label for="api-signin-login">Login : </label><input type="text" id="api-signin-login" name="email" value="" title="e-mail address"/>
<label for="api-signin-pass">Password : </label><input type="password" id="api-signin-pass" name="password" value="" title="password"/>
<div class="sign-in-errors"></div>
<br/>
<button class="sign-in-btn"><span>Sign In</span> <span class="blue">▶</span></button>
</div>
<div id="api-signout" style="display:none">
<p>My Favorite Programs <span class="ltblue_link">▶</span></p>
<p>Application: <a id="api-app-status" href="https://secure.apistudyabroad.com/forms"></a></p>
<button class="sign-out-btn"><span>Sign Out</span></button>
</div>
</script>
The javascript file responsible for this feature is here. I believe the pop up starts at Line 400 with $('.pane-container').each(function() {
This is how your template looks like on generated page (view source in Firefox):
<script type="text/template" id="find-a-program-template">
/*<![CDATA[*/<div style="padding:20px;"><h2>
...
...
...<div class="clear"></div></div>/*]]>*/
</script>
Seems like PHP / WordPress adds that CDATA part to the template during page rendering, but jQuery plugin doesn't know how to ignore it and writes it down instead.
Btw, you also have a bunch of server side <?php the_time('m') ?> calls on the page, but that's probably unrelated.