I'm trying to use the 720Kb datepicker.
https://github.com/720kb/angular-datepicker
While using the simple example :
<datepicker>
<input ng-model="date" type="text"/>
</datepicker>
I'm getting the blow error:
angular.js:11655 Error: [$compile:multidir] Multiple directives
[datepicker, datepicker] asking for new/isolated scope on:
http://errors.angularjs.org/1.3.15/$compile/multidir?p0=datepicker&p1=datep…epicker%20class%3D%22datepicker%22%20date-format%3D%22dd%2FMM%2Fyyyy%22%3E
at angular.js:63
I noticed that if I'm changing the name of the directive in the src file for example to datepickercust the above example will work (with changing the tags).
<datepickercust >
<input ng-model="date" type="text"/>
</datepickercust>
Also , if I'm trying the same example by changing the 'datepicker' tags to 'div' tags , and adding class='datepicker' it works fine.
<div class="datepicker">
<input ng-model="date" type="text"/>
</div>
I just can't understand what's going on here... why the original example not working ?
Thanks in advance.
Check if there are two datepicker directives with the same name and do check what formation they allow like tag, element or attribute etc.
Issue found.
Looks like UI Bootstrap still contain 'datepicker' directive which is deprecated and causing this issue .
Now need to see how I can work with both .
Thanks all.
Related
I'm using Scala-Play with the Play-Bootstrap extension and AngularJS. Since the controlling of the application is managed by AngularJS I need the form to be submitted and the response managed by AngularJS and not by the Play controller.
As I understand and using pure AngularJS one can use ng-model to link each input to a specific $scope nested variable e.g.
<form name="userForm">
<label>
Name:
<input type="text" name="userName"
ng-model="user.name"/>
</label><br />
<label>
Other data:
<input type="text" ng-model="user.data" />
</label><br />
</form>
is it possible to accomplish the same by using ng-model on the form tag? instead of applying it to each input? the problem is that it is not possible injecting the needed ng-model to each input while using Play-Bootstrap i.e. this doesn't work:
#b3.text(computeInSampleForm("impliedVolSpread"), '_label -> messagesApi("myapp.impliedVolSpread"),
'_showConstraints -> false, 'ng-model -> "impliedVolSpread")
it fails with error value - is not a member of Symbol it would work if I only knew how to escape the - dash character.
Since I already created a customized version of the b3.form as b3.bgform it would be great if I could do bg-model at the form level ... is that possible?
You can fix this error by explicitly converting to a Symbol:
Symbol("ng-model") -> "impliedVolSpread"
Or by using an implicit conversion import:
#import views.html.helper.Implicits._
I would like to use Angular Material library in my project for showing the web page in Material design. I'm having input fields directly in a div, instead of having inside a form . How to properly do error validations now ?
Because the examples given on the documentation uses, form tag, which uses form name for showing ng-messages. How to achieve without form ?
You may use the ng-form angular directive (see docs here) to group anything, even outside a html form. Then, you can take advantage from angular FormController.
<div class="form-group" ng-form name="myForm">
<input name="myInput" type="text" class="form-control" ng-model="bindTo" ng-maxlength="5">
<span class="error" ng-show="myForm.myInput.$error.maxlength">Too long!</span>
</div>
Example Plunker
Hope it helps
I have been using Regex pattern validation with AngularJS for the last several versions and it has worked fine.
My application requires that validation patterns are exposed by a scope property, to which the corresponding AngularJS validation directive is bound. Prior to v1.3, it looked something like this:
// On the controller
$scope.validationPattern = "^\\d*$"; // Allow only numeric digits
<!-- in the HTML page --->
<input type="text" name="age" ng-pattern="/{{validationPattern}}/" />
Having now updated AngularJS to v1.4 (bypassing v1.3), I find that the above approach no longer works. Looking at the migration notes for v1.3, I see that this is expected behavior and that a new approach is required, which looks something like this:
// On the controller
$scope.validationRegexp = /^\d*$/; // Use a RegExp instead of a string
<!-- in the HTML page --->
<input type="text" name="age" pattern="{{validationRegexp}}" />
However, I simply can't get this to work. If I place the validation pattern inline (within the HTML input element) it works fine, but when moved onto the scope object and bound to the pattern or ng-pattern directive, no validation occurs.
Here's a JSFiddle that demonstrates the problem.
Any suggestions please?
You should use only the name of the scope variable:
<input type="text" name="age" ng-pattern="validationPattern" />
I am trying to do validation with angular and Bootstrap but for some reasons ng-pattern validation is not working in Zip Code. Any help will be great in this.
Here's FIDDLE LINK
Not able to paste full code, but here is how I am attempting to use the ng-pattern directive:
<input type="text" class="form-control" id="zipCode" name="zipCode"
ng-model="auth.zip" ng-pattern="^(\d{5}-\d{4}|\d{5})$" required="">
The problem is that when you place the pattern inline instead of a scope variable it expects / around the regex, like a litteral.
Like this:
/^(\d{5}-\d{4}|\d{5})$/
Fiddle
See the input docs, check out the arguments section then ngPattern
Hi you can use like this
$scope.zipNumbr = /^[0-9]{1,6}$/;
My current code looks like this:
<form name="home.forms.modal">
...
<input ng-model="home.modal.data.text"></input>
<input ng-class="{error: home.forms.modal.name.$error}"
ng-model="home.modal.data.name"
name="name"
ng-minlength="5"
ng-required="true" />
...
</form>
<button ng-disabled="home.forms.modal.$invalid"
ng-click="home.modalSubmit(home.modal.data)">Submit</button>
I noticed there have been recent changes with messages for forms. What I would like to know is there anything at all in AngularJS that requires me to use the form element. If so then how could I change the above code so it would work with just a DIV ?
You can use the ng-form attribute on any element
<div ng-form name="home.forms.modal">
...
<input ng-model="home.modal.data.text"></input>
...
</div>
<button ng-click="home.modalSubmit(home.modal.data)">Submit</button>
validation on the client is way to hell, you should get the validation errors by server in .error callback of $http , and show them to client.
You may need to use forms with such directives, like ui-mask, to get the right value.
Using a form tag is syntactically correct, and some browsers (IE) do not display things correctly when you try to put form elements (input/button/textarea) into a page without them being surrounded by form tags.