Is there any way to use currency or a custom pipe inside an input text in Angular 2?
I've tried this:
<input [(ngModel)]="order.price | currency"/>
But without success
It's not possible to use pipes in inputs, even in angular 1.
What you are looking for is a mask directive.
For angular1 there are a lot of directives like ngMask, angular-input-masks and others.
Angular2 is in release candidate right now (06/02/2016), so there are just a few "directives".
You can also build your own mask component.
I've been able to use the angular2-text-mask and text-mask-addons as a way to transform the format of input text field values. The documentation and related info is quite thorough and a currency example can be seen on a text-mask demo page.
Though I've not tried it, this ngconsultant blog post discusses a technique for adjusting input values using a somewhat limiting (browser-native focus/blur methods) #HostListener technique.
With either approach you have to be wary of whether you're transforming the input simply to make the UI more friendly for the user OR if you want to utilize/preserve only properly formatted input bound to your data model in the component.
Regarding the former, if you want to remove the formatting that is applied to the input before it is utilized, stored, or passed on, extra work/code/intervention is required either in your component code or in other services that manage the data model to parse the formatting out of the data bound from the input value.
(A very basic solution is discussed in this stackoverflow post.)
Related
Question:
I'd like to know if it is possible to add a custom spellchecker function to a Textarea.
Background:
I am currently using bootstrap-vue's b-form-textarea component to display a textarea that accepts a list of values from a user.
I am already validating state and displaying whether the textarea is valid or invalid. However, I'd like like to show a "red squiggly" (similar to spellcheck) under each "invalid" entry.
As an example, user enters (up to 1,000) car manufacturers
"Toyota, Honda, Dodge, Harley Davidson".
I'd like to display that "Harley Davidson" is an invalid car manufacturer.
It'd be nice to leverage the spellchecker's "red squiggly" to denote an "invalid" entry. If this is not possible would you have any other suggestions?
you can use String method(split) to transfer input text into array, and use the method of map to process the array.
From what I've read, it does not seem possible to add the spellchecker functionality I required to a textarea. What I ended up using instead was a package, found in npm, called "vue-codemirror". It is an extension of the CodeMirror project.
Using CodeMirror, I was able to add gutters with red error icons next to each line (similiar to an IDE displaying syntax errors). In my opinion, the CodeMirror documentation was lackluster and I spent more time looking at source code than I wanted. However, it does seem like very powerful tool.
Notes:
I am using Vue 2.x. As such, I was not able to use the latest version of vue-codemirror (which requires Vue 3).
Vue-codemirror 4.x uses CodeMirror 5
The goal
The goal is to build a minimalistic wysiwyg editor in a text area. Retrieving a string from a network call, an interaction will add an `anchor` tag around selected text, and being able to send that (unescaped!) string over a network call.
The question is around Angular's built-in security measure to escape or ignore HTML tags.
Expected result:
before: Textarea value is set to this string
after: Textarea <a>value</a> is set to this string
However, angular (11) is automatically escaping / ignoring the HTML.
I've found and tried several solutions that use the [innerHTML] directive rather than [(ngModel)] directive. But since I'm working with two-way data bindings, this did not cut it.
If anyone knows a way to nudge angular to ignore this html sanitization for a single input field, I look forward to read about it
Thanks in advance
You need to use DomSanitizer (inject it) and do something like following:
this.sanitizer.bypassSecurityTrustHtml(value)
I'm not sure about how exactly are you planning on sanitizing the output (or for that matter, input), but have a look at https://angular.io/api/platform-browser/DomSanitizer#bypasssecuritytrusthtml
This is my first attempt to create anything with vue.
Here's a quick JSFiddle demo
I'm trying to create a form that display the values without input, and then clicked, the input will display. I've managed to have a mockup "working", but I'm not very sure if this is the correct approach or not. I'm not very sure about:
Vue.nextTick(function() {
document.getElementById(field.id).focus();
});
On the other hand, is there a recommended input validation library or something?
I would really appreciate any guidelines here :wink:
Thanks!
Regarding you first question I don't think there is an issue with using plain javascript to focus on your input. You can also achieve this with vue refs
See updated fiddle
This doesn't look cleaner but with refs you can put what you want as a ref and you are not limited by ids and in the end it's your choice what to use.
Regarding validation libraries here are a few:
Vuelidate
Vee Validate
Other ones
I'm using angular-ui-select2 to generate a select box.
By default, results displayed in select2 lists simply display a piece of text, but select2 provides a configuration option, formatResult from which one can return custom markup.
I'd like to use another directive I've written as part of the result markup.
This plnkr demonstrates a minimal use case. How can I get the projectLikesCount directive to be compiled and displayed properly within the dropdown?
I was trying to do the exact same but couldn't find a solution. It seems that the population of the results by formatResult is not in the angular lifecycle, therefore whatever markup returned by the function is displayed as is i.e., no directives will be "translated" into behaviour.
An example of this is that if you add the following markup:
<div ng-show='isNewElement'>Add new</div>
it will be rendered every time with no regard to the isNewElement value.
Considering the time this question has been unanswered I guess that it's either really easy or really complicated to achieve the desired behaviour. I'll post if I find a somewhat useful solution.
I find the the Django Admin's default models.ManyToManyField widget to be cumbersome to use. It's the HTML select element and if you have a lot of Objects of the "other" model then it's quite impractical to actually find the "other" Objects you want to associate with "this" Object. And if you have a lot of objects of the "other" model it seems to even slows down the rendering of the Admin page.
I'm aware that I can build my own custom admin widget and apply it to my ManyToManyFields as I see fit, but are there any pre-built ones out there that I might use instead? In my dreams, I picture an auto-completing text input HTML widget. Is this even practical/possible to do in the Django admin framework?
Thanks.
Try using the filter_horizontal attribute on your admin class, for example:
class SomeModelAdmin(admin.ModelAdmin):
filter_horizontal = ('users',)
As mentioned in the documentation, "adding a ManyToManyField to this list will instead use a nifty unobtrusive JavaScript "filter" interface that allows searching within the options". filter_vertical does the same thing with a slightly different layout.
you could try using a raw id in the admin.
and the django docs:
http://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.raw_id_fields
if you are looking for something with auto-complete you might want to look at this as a starting point http://code.djangoproject.com/wiki/AutoCompleteSolutions
and finally a very simplistic inline Example:
models.py
class SomeModel(models.Model):
users = models.ManyToMany(User)
admin.py:
class SomeModelAdmin(admin.ModelAdmin):
raw_id_fields = ("users",)
I haven't actually played with it but I found this promising looking library referenced elsewhere.
It appears to do exactly what I wanted. Rather than loading the entire list of related objects (regardless of how many there are!) and presenting you with a picker to select a few of them, as filter_horizontal does, it presents a search/filter box and uses typeahead/autocomplete calls to retrieve results dynamically. This is great for the case where you have maybe 5000 users and want to pick 3 or 4 of them without waiting for 5k <option> elements to download and render.
This is an old question, but I want to add an answer here for people who find this just like I did: this situation is exactly what Django inline admins are for. Specifically, I use TabularInlines with raw id fields for many-to-many relations that have too many choices.
https://docs.djangoproject.com/en/2.1/ref/contrib/admin/#django.contrib.admin.TabularInline
You can try using Inline model as such -
class ManyToManyInline(TabularInline):
model = MyModel.many_to_many_field_name.through
raw_id_fields = ("render_raw_id_using_this",)
#register(MyModel)
class YourAdminClass(AnyBaseClass):
exclude = ("many_to_many_field_name",)
inlines = (ManyToManyInline,)
Now there is another issue I faced, finding "render_raw_id_using_this" field name.
So, I moved to shell and tried finding fields in through model as such -
In [1]: MyModel.many_to_many_field_name.through._meta.fields
Out [1]: (<django.db.models.fields.AutoField: id>, <django.db.models.fields.related.ForeignKey: fieldname1>, <django.db.models.fields.related.ForeignKey: fieldname2>)
So, I replaced render_raw_id_using_this with fieldname1
Similarly, you can use these field names to render raw id instead of drop down list in Inline model.