Is the a way to make a textarea ui-tinymce part of and an editable-form?.
I found a workaround by making ng-model of the editable-textarea and textarea ui-tinymce the same and then I hide the editable-textarea.
<form
onaftersave="onsave({$data:$data})"
editable-form
name="forms.{{formName}}"
>
<textarea ui-tinymce="tinymceOptions"
name="desccomp"
ng-model="item.desccomp">
</textarea>
<div
e-ng-show="false"
editable-textarea="item.desccomp"
e-name="desccomp"
>
</div>
</form>
Actually, TinyMCE already has inline abilities
https://www.tinymce.com/docs/demo/inline/
I'm facing same issue and thinking I'm gonna use only tinyMCE (with angular-ui-tinymce) leaving xeditable for this case).
Related
I have already existing forms on admin panel and i've wrapped it to <div ng-app="app" ng-controller="app-nav"> and after that all forms stopped to work...
How can i disable default AngularJS behaviour to make all forms get back to work again?
https://jsfiddle.net/24sufpvn/
Here AngularJS prevents default form submission.
Angular.js prevent the native <form> submission because it's missing a valid action attribute.
I have edited your fiddle and added the missing action attribute, and now the form submits correctly:
<div ng-app ng-controller="LoginController">
<form method="post" action="https://formsubmit.co/your#email.com">
<input type="submit" name="s" value="Submit">
</form>
</div>
Working fiddle:
https://jsfiddle.net/SlumDog1/kg6m5r7v/11/
I didn't find any solution except editing angular.js:
Need to replace line:
if (!('action' in attr)) {
to this:
if (false) {
I created a custom directive which is used to access the id of the form, to display messages if same validation failed.
directive Code
<div>
<md-input-container>
<label class="inputLabel" translate>amount</label>
<input ng-model="order.amount" name="amount" type="text" required
max="availableAmount"
ng-disabled="disabled" ng-currency flex/>
<ng-messages flex for="dataForm.amount.$error" ng-if="dataForm.amount.$dirty">
<ng-message when="max">max reached</ng-message>
</ng-messages>
</md-input-container>
</div>
usage:
<form id="dataForm">
<custom-directive></custom-directive>
</form>
It seems like I can not access the form. Or angularmessage can not handle the different scoping.
Has anyone the same problem or an idea?
Thank you
fyi.: I have found the following post, but I didn't think that i have the same problem as that guy.
angularjs ngMessages inside directive
I use Angular 1.4.8;message 1.4.8 and angular material 1.0.4
If directive have an isolated scope, than it will not be able to access the form controller object of the ng-form directive.
Angular enables multiple canonical forms, so you can simply wrap your input inside of your directive with a form / ng-form.
I'm building a small search app using Elasticsearch and AngularJS. I'm using AngularJS UI bootstrap typeahead to implement autocomplete and I'm using ES's edge_n_grams and highlight object to 1) generate the suggestions and 2) highlight the suggestions, respectively. ES highlight object wraps the suggestions in HTML <em></em> tags... which seems to be causing some issues with how I have things setup.
1) When I press Enter key instead of clicking on the search button - all that happens is the search terms are displayed wrapped in the <em></em> tags AND no search is performed... <em>search terms</em>
2) When I select a suggestion with the mouse, same thing happens.
The only time search performs is when I type a query in and click the search button...
Here is the search form that I'm using, I have ng-submit="search()" on the form element and on the button, not sure where I'm going wrong......?
<form name="q" ng-submit="search()" class="navbar-form" id="results-search" role="search">
<div class="input-group">
<input type="text" name="q" ng-model="searchTerms" class="form-control input-md" placeholder="{{ searchTerms }}" id="search-input" uib-typeahead="query for query in getSuggestions($viewValue)" typeahead-on-select="search($item)">
<div class="input-group-btn">
<button type="submit" ng-submit="search()" class="btn btn-primary btn-md"><i class="fa fa-search fa-lg"></i></button>
</div>
</div>
</form>
Am I doing something wrong with the UI Bootstrap Typeahead?
More clarification
So basically what I'm asking is how do I get the tags stripped from the suggestions, on selection and for searching?
Similar kind of example already asked in Stackoverflow: Click here
<body ng-app="debounceExample">
<div ng-controller="ExampleController">
<form name="form" ng-submit="go()" novalidate>
<label>Name:</label>
<input name="input" type="text" required ng-model="user" /><br />
<div ng-messages="form.input.$error" ng-show="form.input.$touched">
<div ng-message="required">required</div>
</div>
test
</form>
</div>
</body>
Please focus input field and click on anchor tag. You can see, the anchor tag click is not working as the input field validation is triggered on blur. I am seeing the issue is due to using form.input.$touched in ng-show. I have created a plunker to reproduce the issue.
http://plnkr.co/edit/0NMhxP18EhBjLyKrJQV5?p=preview
To reproduce the issue, first focus input field and then click on anchor tag.
If you change the ng-show to
ng-show="!form.input.$pristine"
You may get the behaviour that you want.
Here is an updated plnkr.
You can remove the href='' from your anchor tag. It's also working fine even in your plunkr so I'm not sure what is the actual problem. A form has its own scope, so if you try something like
<a ng-click='myVar = !myVar'>click me</a>
and you set myVar=false outside the form it won't work. You would need $parent.myVar, but that isn't the case here.
With the changes to angularjs and bootstrap 3 I have been unable to create a form field that's required where the item will be surrounded with red highlight by only adding the required parameter to the input field. Here is a plunker with how I have it setup on my system and would expect it to work. I can't seem to find any documentation on bootstraps site about required either so that would really help if anyone can find that.
Plunker
EDIT: Replaced all the following with below comments ideas... I would still like a solution where I don't need to write any css and use Bootstrap 3.
My form field looks like this:
<body ng-app>
<div ng-controller="Controller" class="container">
<form novalidate class="simple-form" name="myForm">
<div class="form-group col-sm-4">
Name: <input type="text" ng-model="name" name="name" class="form-control" required/>
E-mail: <input type="email" ng-model="email" name="email" class="form-control" required/>
<small class="error"
ng-show="myForm.email.$error.required">
Your name is required.
</small>
</div>
</form>
</div>
</body>
Script.js Looks like this:
function Controller($scope) {
$scope.name = "Test";
$scope.email = "";
}
Style.css looks like this:
input.ng-invalid {
border: 1px solid red;
}
While this works it replaces the bootstrap css with the css above. I would much prefer to simply add in required to an element and not have to rewrite the css to add the hue and the animation.
I agree with both of the other two answers but would like to add more
I think your main problem is that Bootstrap 3 removed styling based on the :invalid and related pseudo-classes (see here for why). This is where the red outline in bootstrap 2.x came from.
Firstly, to fix your plunker you should:
Bootstrap your app with ng-app as Mike says
Put your input in a form with novalidate
Give a model to your input with ng-model so that it can be invalidated (by angular, using classes)
Move jQuery script include before bootstrap as it is a requirement of bootstrap.
Now you have a plunker where the correct classes are applied to indicate input validity. You won't yet have styling on these, but they won't depend on your browser's HTML5 form validation, so will work in anything angular supports.
To apply styling, you can either use straight CSS and apply it to the ng-valid, ng-invalid, ng-invalid-required etc classes, or you can use the ng-class suggestion from this comment to apply bootstrap's classes when you need them
ng-class="{'has-error': formname.inputname.$invalid}"
if you have named your input and wrapped it in a control.
Updated plunker: http://plnkr.co/edit/mE3dkG?p=preview
Edit
I had a go at making a directive for this too. It may be overkill, but this should work wherever you have a form-group class and add an ng-form to the same element
.directive('formGroup', function(){
return {
restrict: 'C',
require: '?form',
link: function(scope, element, attrs, formController){
if(!formController)
return;
scope.$watch(function(){
return formController.$valid;
}, function(valid) {
if(valid)
element.removeClass('has-error');
else
element.addClass('has-error');
});
}
};
});
Yet another plunker: http://plnkr.co/edit/UQjRrA?p=preview
* The email will not be valid unless it looks like an email
You have a couple of things missing here. First, in order for a form field to validate it needs a unique name:
<input class="form-control" type="text" name="test" required/>
Second, in order to disable stock HTML5 validation, you need to add a novalidate attribute to the form:
<form class="form-horizontal" name="myForm" role="form" novalidate>
Third, and most importantly, your example has no app or controller associated with it, so angular is completely ignoring it. That one you have to fix yourself.
Read more about angular forms here: http://docs.angularjs.org/guide/forms
I suggest you this excellent step by step : http://www.ng-newsletter.com/posts/validations.html