I would like to have an ng-select which allows only numbers while typing/search as it is used only for Year field
<ng-select class="single" [items]="years" [multiple]="false" bindLabel="name" #select >
Do we have a way to control what user can type ?
You can check by the ng-select output (search)="myListenerFunction($event)" this will catch an object who look like
{
term: string,
items: yourObject[]
}
term is what the user serch and item the result of the search.
You can see it there: https://ng-select.github.io/ng-select#/events
Related
Help with filter function!
I have a table with phone number and name as columns.
The JSON object would look something like this :
Details = [
{PN : '123-456-7890',
NAME : 'PERSON A',
},{
PN: '192-453-7655',
NAME: 'PERSON B',
}
]
I need to search on keyup and filter the data. The user can search in any of these patterns:
xxxxxxxxxx,
xxx-xxx-xxxx,
xxx-xxxxxxx,
xxxxxx-xxxx.
and still needs to get the data having xxx-xxx-xxxx as phone number in the table. Search should start as soon as the keyup triggers.
I tried using match and test methods, but couldn't make connection between search input, regex and the elements from table.
Can anyone suggest how I can tackle this situation?
Please use this regex -
/^\d{3}-\d{3}-\d{4}$|^\d{3}-\d{7}$|^\d{6}-\d{4}|^\d{10}$/
Angular Code -
matchNumber(){
var str = "12311111455";
var res = str.match(/^\d{3}-\d{3}-\d{4}$|^\d{3}-\d{7}$|^\d{6}-\d{4}|^\d{10}$/);
if(res.length > 0){
console.log('Matched);
}}
Valid Numbers
1234567890
123-456-7890
123-4567890
123456-7890
Invalid Numbers
123453647564756876
111223-234234
Check DEMO -
Check Valid Numbers
I have an array of objects that includes an element with an object and I'm looking to display the name of the object on a selectable dropdown using ng-select. I can console log everything as expected, however when I try to display the data I am only able to show [object, object]. The correct number of objects.
HTML -
<ng-select
[searchable]="false"
bindValue="id"
bindLabel="medications.items"
[items]="selected"
[(ngModel)]="serviceUsersMedication">
</ng-select>
TS -
onSelect({selected}) {
this.selected = selected;
const filteredMeds = this.selected.filter(item => {
return item.medications;
});
this.serviceUsersMedication = filteredMeds.map(item => {
return item.medications;
});
console.log('Selected:');
console.log(this.selected);
}
You're using the same variable for [items] (the collection ng-select uses to display the options) as for [(ngModel)] (used for storing/displaying the SELECTED (1) item).
You have to split this:
[items] should refer to the collection
[(ngModel]) should refer to your selected item.
Your ng-select should look like this:
<ng-select
[searchable]="false"
bindValue="id"
bindLabel="name"
[items]="medications.items"
[(ngModel)]="selected">
</ng-select>
Assuming you have a name attribute in the items array of medication, else change it to the attribute that makes sense to show.. selected is already containing the selected item, no need to filter for that.
Also assuming you're using ng-select from #ng-select/ng-select
In Angular, how to use *ngIf to check whether a JSON value includes a certain string, and then show them a certain URL ? In my case I have a object name called campaigns.description which has a value that includes a description. I want to see whether a given string, for example "one beam" is included in that description and show an URL based on that.
So not the way that the value equals a certain string, but the text that is held within the value includes a certain string.
You can use indexof() function to check the existence of some substring inside a string. This function returns '-1' if the substring is not present in the string.
<label *ngIf="campaigns.description.indexOf('One Beam') != -1 ? true : false">{{urlToShow}}</label>
You could generally use indexOf to check whether a string contains a sub-string.
console.log("Sample string".indexOf('string'));
console.log("Sample string".indexOf('not'));
The Angular part:
Trivial (not recommended)
Trivial solution is to check directly in the *ngIf condition
<div *ngIf="campaigns.description.indexOf('one beam') !== -1; else other">
<!-- contains the sub-string -->
</div>
<ng-template #other>
<!-- does not contain the sub-string -->
</ng-template>
However binding a function to *ngIf directive with default change detection strategy would trigger the function for each change detection cycle. It might lead to performance issues.
Additional property (recommended)
You could introduce additional property to hold the result of the condition in the controller and use it in the template.
Controller (*.ts)
// I assume `campaigns` is initialized in a subscription
ngOnInit() {
someObservable.subscription(
(res: any) => {
this.campaigns = {
...res,
subString: res.description.indexOf('one beam') !== -1
}
},
(error: any) => { }
);
}
Template (*.html)
<div *ngIf="campaigns?.subString; else other">
<!-- contains the sub-string -->
</div>
<ng-template #other>
<!-- does not contain the sub-string -->
</ng-template>
I am struggling using enum values in list filters in Thymeleaf.
I know how to iterate over enum values and how to compare them against constant values. However, I want to compare it against a 'variable' value. How can I achieve it?
In my example below, I want to iterate trough all colors (enum) and then filter a list of cars by the current color enum and display their names.
How do I specify the list filter in the second <div> correctly?
<div th:each="currentColorEnum : ${T(de.my.enum.color).values()}">
<div th:each="currentCar, carStatus : ${model.carList.?[#this.colorEnum eq __${currentColorEnum}__]}">
<textarea th:field="*{carList[__${carStatus.index}__].carName}"></textarea>
</div>
</div>
Current error message:
org.springframework.expression.spel.SpelEvaluationException: EL1008E: Property or field 'red' cannot be found on object of type 'de.my.class.car' - maybe not public or not valid?
No need for preprocessing in this case. It's failing because ${model.carList.?[#this.colorEnum eq __${currentColorEnum}__]} resolves to ${model.carList.?[#this.colorEnum eq red]}. Which means it looking for cars where car.colorEnum == car.red -- hence the error field 'red' cannot be found on object of type 'de.my.class.car'.
Your Thymeleaf should look something like:
<div th:each="currentColorEnum : ${T(de.my.enum.color).values()}">
<div th:each="currentCar, carStatus : ${model.carList.?[colorEnum eq #root.currentColorEnum]}">
<textarea th:field="*{carList[__${carStatus.index}__].carName}"></textarea>
</div>
</div>
I want to allow a user to provide a list of one-word attributes without parameter values. For example,
<container row crosscenter wrap spacearound ...>
which results in something like this in container.html
<div [ngClass]="{ 'flexDisplay': true, 'directionRow': isRow, 'directionCol': isCol, 'contentSpaceAround': isSpaceAround}" ...>
What I'm missing is how to set
#Input('row') isRow = false;
to true if 'row' was present in the container line.
Any ideas?
Thanks in advance.
Yogi
This can be handled in ngOnChanges. The value can be assigned either back to input property or to some object that will be passed to ngClass
ngOnChanges(changes: SimpleChanges) {
if ('foo' in changes) {
this.options.foo = true;
}
}
Since there's no way how inputs can become unassigned, there's no reason to provide bindings for them. #Attribute can be used instead:
constructor(#Attribute('foo') public foo: boolean|null) {
this.foo = (foo != null);
}
Using attributes for regular options isn't a good decision, design-wise. This prevents from setting them dynamically. Instead, it is always preferable to accept options input. If all options are supposed to be flags, it can be a string input that will be split and processed in ngOnChanges, like:
<container options="row crosscenter wrap spacearound">
or
<container [options]="'row crosscenter wrap spacearound'">
I think the answer to my question is to create directives for each of the "one-word" tags (attributes) I want to use.
:-)