Develop Reference

Invalid number input in HTML

I want the following Angular code (using Angular 12) to show "Illegal award number" when the input is invalid.
As you can see in the screenshot, when the number is -1 (smaller than the min value defined on the input), the div is shown as expected.
However, if I input some text such as 1-, or an expression 3-4 and hover my mouse over it, the browser will tell me my input is not a valid number, but the div is not shown (which means awardInputRef.invalid is false).
Why is that?
Here is the relevant code
<label class="form-label" for="awardInput">Award</label>
<input class="form-control" id="awardInput" type="number" min="0" max="10" step="0.1" [(ngModel)]="award"
#awardInputRef="ngModel" />
<div *ngIf="awardInputRef.invalid">Illegal award number</div>
PS:
If I add (blur)="onAwardBlur($event)" to the award input and add a function in my component
onAwardBlur(event) {
console.log(event);
}
then debug the code by logevent.target.validity.valid, I will see it is false.
The code is available on stackblitz. The Angular version there is 11, and the div does not show up even if I input -1 there.

As part of Angular version 12 only min and max directive are implemented that's why stackblitz version is not working.
You can workaround your issue using native Input element ValidityState
Define another one template variable on input element
<input class="form-control" id="awardInput" type="number" min="0" max="10" step="0.1" [(ngModel)]="award"
#awardInputRef="ngModel" #inputRef />
Then you can add some custom validity something like this:
<div *ngIf="awardInputRef.invalid
|| inputRef.validity.badInput && (awardInputRef.dirty || awardInputRef.touched)
">Illegal award number</div>
Working Example

input: -1
Your Using [ - ] this special character so the filed goes awardInputRef.invalid.
so div shown.
input: 1-
Your using number first it goes awardInputRef.valid or something else but not awardInputRef.invalid .
so the div not shown in this case.
you just inspect the field and find the before after changes .

Creating an entry form using Angular

I am in the process of learning AngularJS (version 1) and want to convert a simple word game that I had previously written.
I have a partial HTML which will select a word from a dictionary (JSON file) and display it on screen. The word is saved in $scope as selectedWord. I now want to display an array of empty textboxes for the user to input their guess. The number of boxes to display will obviously be determined by the length of selectedWord and will be different for each game played.
The relevant HTML I need to produce for each letterbox is:
<input name="letters[]" class="answerbox" id="letter_1" onkeyup="testResults(this)" onfocus="this.select();" type="text" size="1" maxlength="1">
with the id incremented by 1 for each new box.

When selectedWord changes, create an array containing as many objects as the length of selectedWord, something as simple as
$scope.guesses =[];
for(var i=0;i<$scope.selectedWord.length;i++){
$scope.guesses.push({
value:''
});
}
Then in your template, use ng-repeat like:
<input type="text" name="letters[]" class="answerbox" ng-repeat="guess in guesses" id="{{'letter_'+$index}}" ng-model="guess.value" ng-keyup="testResults(guess)" ng-focus="this.select();" size="1" maxlength="1">
But if you're using angular properly, I don't you'l need that id unless you want to associate it with a <label>.

ng-repeat
In ng-repeat you can repeat an element and the index is tracked by {{ $index }}. It is zero-based though so you most likely need to add 1.
Split string to array
What you could do is to create an array of characters from your string/word and do an ng-repeat with it.
Track items by $index
It is important that you track the items by $index, so angular js does not complain about dupes.
Here's the code I propose:
<div style="float:left" ng-repeat="chars in selectedWord.split('') track by $index">
<input name="letters[]" class="answerbox" id="letter_{{$index + 1}}" onkeyup="testResults(this)" onfocus="this.select();" type="text" size="1" maxlength="1" >
</div>
I am not sure if it can be done without the surrounding div but if you make it float: left it should not make a difference.

settin up a text input value with Javascript

I'm creating a scoring ballot to score submitted contest videos. I use the same HTML form for all videos to score. The only fields that are being dynamically updated with java script are: judge name and a contestant name. My problem is the value that I set up with java script is showing on the form itself but is not recorded in a csv file.
Here is my HTML:
Select your name
Judge#1
Judge#2
Judge#3
Judge#4
Judge#5
Judge#6
Based on this option select they would get a set of videos they have not completed scoring on, and first scoring form with video embedded is displayed. Initially they are hidden on the page.
<form id="ballot1" action="javascript: sendBallot()" method="post" enctype="multipart/form-data">
<table border="0" style="border-collapse: collapse" width="100%" id="table3">
<tr>
<td><input type="hidden" name="Contestant" value="Contestant1"></td>
<td width="78%"><input name="form_judge" id="form_judge" value=""></td>
</tr>
<tr>
<td><p><span style="font-size:1em;"><strong>1. Efficacy of Practice - 50%</strong></span></p></td>
</tr>
<tr>
<td><label class="ballot"> a. Video explores relevant subject matter </label>
</td>
<td>
<select class="ballot" id="one_a_score" name="one_a_score" valign="bottom">
<option value="0" selected>Select Score</option>
<option value="2">Poor</option>
<option value="4">Below average</option>
<option value="6">Average</option>
<option value="8">Good</option>
<option value="10">Excellent</option>
</select>
</td>
</tr>
</table>
<div class="buttons">
<input type="submit" name="submit" value="Submit Form" id="submit"/>
<input type="reset" value="Reset" id="resetBtn"/>
</div>
My java script to set up the form values:
function showBallotForm(divName) {
var divName = 'Contestant1';
document.getElementById(divName).style.display='';
var selectjudgeName = document.getElementById("judgeName");
oFormObject = document.forms['ballot1'];
oFormElement = oFormObject.elements['form_judge'];
oFormElement.value = selectjudgeName.options[selectjudgeName.selectedIndex].value;
}
var divName = 'Contestant1'; - this will be deleted as soon as I figure out why judge name is set up and showing on the form with no problem, but when I enter all scores and hit "submit" button, entire form is recorded in csv file, except for one value (form_judge) that was set dynamically. By the way, I tried to use getElementById insted of oFormElement, the result is the same. I can see it on the form, but it records just word 'judge' in the csv file, not the actual name.
What am I missing? Your help is greatly appreciated.

I can't quite grasp what your javascript does because there are several errors in it:
function showBallotForm(divName) {
var divName = 'Contestant1';
The divName parameter is never used since it is immediatly re-written?
document.getElementById(divName).style.display='';
No idea what you wanted here, you want to display the hidden input?
var selectjudgeName = document.getElementById("judgeName");
There is no element with "judgeName" id on your HTML, so this won't work, I will suppose you did not paste the full code then
oFormObject = document.forms['ballot1'];
oFormElement = oFormObject.elements['form_judge'];
Ok, but you could do this by simply using document.getElementByid("form_judge")
oFormElement.value = selectjudgeName.options[selectjudgeName.selectedIndex].value;
But here is your error. You cannot set a value on a select. I see the object is an input but this is weird since I can't even see where selectJudgeName came from! The data that is send on the form is the selectedIndex, not the value. So what you want is to find which option you want and point to it something like this:
oFormElement.selectedIndex = (the index of the option you want)
If you don't know the index, you will have to look for it on the oFormElementobject, just do a for loop searching which of the option have the value you want, and when you find it, set that as the selectedIndex and break out.
Also, what submits this is a javascript you named in the action, you sure that is sending the proper data?

Replace specific text with search input

I am using an API to view customer database and added a search button. The parameter and value that works when I test it is:
filters:[{"field":"keyword_search","operator":"is","value":"Michael"}]
my complete URL looks like this: https://www.mydomain.com/v1/objects/object_14/records/5648623548321?filters=%5B%7B%22field%22%3A%22keyword_search%22%2C%22operator%22%3A%22is%22%2C%22value%22%3A%22Michael%22%7D%5D
My goal is that when someone enters something in the search box and presses enter, the text they entered should simply replace the part that says: "Michael".
Is this possible with Javascript? Or is there a better way to do this? Essentially, the API does not supply me with a method of doing a search, instead I have to filter. But the filter requires the URL to have everything from [{"field....
Unless I'm mistaken, most paramaters are simply. ParameterName and Value. This one here is ParamaterName and value with other parameters.
Any help will be greatly appreciated

Basically you are adding multiple searches, so you could provide multiple inputs and at then end concat all of them.
<input type="text" name="filter[]" value="one" />
<input type="text" name="filter[]" value="two" />
<input type="text" name="filter[]" value="three" />
Then on submit you can turn those into your query string (JSFiddle)
var filters = Array.prototype.slice.call(document.querySelectorAll('input[name="filter[]"]'));
filters = filters.map(function (filter) {
return {"field":"keyword_search","operator":"is","value":filter.value};
});
console.log('filters=' + encodeURIComponent(JSON.stringify(filters)));
Your question is kind of confusing because its not a simple search API its a filter API.

copy - paste in javascript

I have this code
<input name="mpan[]" value="" maxlength="2" size="2">
<input name="mpan[]" value="" maxlength="2" size="3">
<input name="mpan[]" value="" maxlength="2" size="3">
<input name="mpan[]" value="" maxlength="2" size="12">
What I have to do is I am provided with a large key for example 0380112129021. When I do Ctrl+C on that key and select any box and press Ctrl+V, the number automatically get pasted in different box, for example: first input box gets 03, next gets 801, next gets 112 and rest gets pasted on last one 129021.how do i achive this from javascript

If you're looking to catch paste events (rather than the literal Ctrl+V), the onpaste event may be for you, and is supported by most browsers according to this answer.
The splitting of the input value you could do using substring().

Easy. On each of the input box, add an onkeyup handler and inspect the input values.
Little clarification, you're trying to do something like serial/key input boxes, right?

okay if you have no idea you should read through some stuff.
i can recommend to read about
javascript - events.
especialy the onkeyup/onkeydown events
stringparsing (substring)
after that you will see the answer glowing on your screen ;-)
a little hint: if you store the pressed keys to a variable, it should be cleared after the action is triggered. and you should check what you have in you keypress cache and clear illigal input.