For Angular 5 + material library.
The core problem:
I have an input field that is supposed to accept a comma separated list of words. Some of these words could be from a pre-existing list and some could be completely new. So if the word happens to be from the pre-existing list, I want to allow autocomplete to complete it. I am not able to get this to happen. Any help would be greatly appreciated.
The separator could be something other than a comma.
I thought I saw a tutorial, mostly a work around somewhere that shows this. It wasn't exactly what I want to achieve. Unfortunately, I didn't save it. If anyone has this link, it would help.
This is my code as of now. It behaves more like a drop down, then like autocomplete
<mat-form-field>
<input matInput class="form-control" id="category" type="text"
formControlName="category"
[matAutocomplete]="auto" />
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let category of categories" [value]="category">{{category}}</mat-option>
</mat-autocomplete>
</mat-form-field>
I have mostly used the Material library, but I am not very satisfied documentation-wise. If mixing in an autocomplete component from a different library would work better, any pointers would be helpful
Related
I'm attempting to write a little script that, as part of it, would automatically complete a webform using data from a dictionary.
I've developed this script for other forms in the past with a pretty simple setup: the elements in the form are identified with a line like...
<input type="text" name="full_name" id="full_name_id" maxlength="80" value="">
<input type="text" name="title" id="title_id" maxlength="80" value="">
So, I'd navigate to www.theformsite.com/theform.php?full_name_id=David&title_id=Stuff and find those slots already filled in.
For a couple new forms I've been working with though, that doesn't seem to work: there's no response to these parameters. Are there any general things that could prevent this from working that I should check on?
I'm using matInput. What I want is that the content in matInput is marked/highlighted so that if I press any key the text gets deleted. For example you double click a word in the search bar here in stackoverflow. How can I archieve that?
<mat-form-field>
<input matInput [(value)]="test">
</mat-form-field>
Assuming you're using Angular 8, you can use #ViewChild decorator to get a reference to your input element. Then you select the input value within the ngAfterViewInit lifecycle hook. In order to link the input element with #ViewChild, you can use a template reference variable (e.g. #food).
Please have a look at the following StackBlitz
Please note that using setTimeout inside ngAfterViewInit prevents you from getting an ExpressionChangedAfterItHasBeenCheckedError.
I want to display the validation error with inside a bubble under the input, which is visible as long as the user focuses the element.
Obviously this is not an easy task, and I gave up on my first try to do this only with CSS (cannot make it overly certain elements, what if the element is at the end of the page etc.).
So I went back to the angular page and found the matTooltip, which behaves exactly as I want. (on top of other element, changes position when at the end of the page etc.) :) However I'm stuck on how to best combine those two.
matError is tightly coupled with matFormField, matTooltip is more or less independent.
Has somebody tried this or something similar?
You can use it combining matTooltip and matTooltipDisabled:
<div class="example-container">
<mat-form-field>
<input
matInput
placeholder="Enter your email"
[formControl]="email"
[matTooltip]="getErrorMessage()"
[matTooltipDisabled]="!email.invalid">
</mat-form-field>
</div>
The Stackblitz example: https://stackblitz.com/edit/angular-lpnqm5
Hope it helps!
If you've ever looked at what ASP.NET MVC actually renders when you use #Html.CheckBoxFor, then you've seen that each checkbox you request to be rendered actually results in the emission of not one but two input tags. One is the "true" value checkbox, and the other is for "false." The latter input is of type "hidden".
Generally this doesn't cause problems if you're using ASP.NET MVC correctly. You wouldn't notice the input doubling unless you tried to, for example, do something directly with Request.Form(e.g. Why does ASP.NET MVC Html.CheckBox output two INPUTs with the same name?)
My question, though, is how screen readers deal with this. For example, can they be relied upon to correctly report only the visible checkbox to the site user?
Screen readers will ignore hidden inputs.
Given the example you cite in your comment, it returns this code:
<div class="col pure-u-xl-1-3 pure-u-lg-1-3 pure-u-md-1 pure-u-sm-1 pure-u-xs-1">
<label>Home Club Newsletter</label>
<input checked="checked" … id="newsletter" name="JoinHomeClub" type="checkbox" value="true">
<input name="JoinHomeClub" type="hidden" value="false">
<span class="checkbox-label">Yes, please sign me Up!</span>
</div>
Right off the bat there is a problem here because the <label> is not associated with the control, and the visible text that is next to the checkbox is not associated with the field.
When I access the field in NVDA, all it says is "checkbox checked". There is no accessible name at all.
But to your question…
Your question was related to the <input type="hidden">. As #SLaks said, screen readers ignore <input type="hidden">. The fact that they have the same name value is no problem. If they had the same id value, then you would have a problem (how it would manifest in a screen reader depends on things and stuff).
I'm creating a large dynamic form and want to create checkboxes and radio buttons like:
<label><input type="radio" name="myradio"><span class="foo">This is the Label</span></label>
This is for a number of reasons. There's nothing wrong with this as far as HTML spec goes.
But, jquery mobile generates a DOM error for every checkbox or radio button generated this way. It really seems to want:
<input type="radio" name="myradio" id="radio1"><Label for="radio1">...</label>
Any workarounds? Ideas?
This works fine: http://jsbin.com/ofuhaw/228/edit with latest JQM
Maybe you should just swap the order of elements.