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 .

How to reveal (and hide) button after typing in Angular?

I am quite good in jQuery, but Angular is not (yet!) one of my strongest skills. I have the below JSFiddle in jQuery, but now it turns out I can't use jQuery, so I am forced to use Angular.
http://jsfiddle.net/eAt6Q/1/
What I want to do, is to show a button after typing something in an input field and removing it when the input field is blank (so at the initial state or when backspacing and there is no letter left), just like in the example.
How would I do this? How do I bind a button to a keypress, because I am struggling to find that out.
I have tried something like this:
<input type="text" id="testInput" />
<button ng-if="testInput.length"></button>
<input type="text" id="testInput" />
<button ng-hide="testInput.length"></button>
But this is not working and I know for sure I am doing something wrong.

ng-model is all you need in angular
<input type="text" id="testInput" ng-model="testInput" />
<button ng-show="testInput !== null "></button>
You can use ng-blur for more actions

you can use ng-show or ng-if both to hide the button but ng-if more suitable to hide button from dom
<input type="text" id="testInput" ng-model="testInput" />
<button ng-if="testInput !== null || testInput.length > 0"></button>
or you can also use ng-disabled to disabled the button without hide.

HTML Input Box custom step buttons

Hope someone can point me in the right direction with this.
I have a simple input box:
<form>
<input id="Days" name="Days" type="number" required step="0.025" min="0.000" max="5" value="1.000">
<input type="submit" id="Sub"/>
</form>
Which works OK but the users have requested:
Only allow input in multiples of 0.025
The up and down arrows move in multiples of 1
So it is perfectly acceptable to type in 1.025 but click on the up arrow in the box gives 1 then 2 etc.
I can configure it to meet either requirement but not both at the same time. Is there a way to override the behavior of the arrows achieve this?
Update
The solution provided by frajk below works well but when you click on submit then you get the message:
Anyway round that ?

Assuming you have jQuery available, I think this does what you're looking for
<input id="Days" name="Days" type="number" required step="1.000" min="0.000" max="5" value="1.000">
$("#Days").change(function(e) {
var $ele = $(e.target);
$ele.val( (Math.ceil($ele.val()*40)/40).toFixed(3) );
});

Your code works fine as you want in chrome and firefox.
Arrow up click make value change to 1.025.

jquery toggle between password and text field IE bug

I am using this jquery from the link below for login toggle between password and text field
http://www.electrictoolbox.com/jquery-toggle-between-password-text-field/
I am testing on IE and basically when you toggle the password field (the username is fine), the input field goes smaller on focus, which really annoys me and spent last hour trying to figure it out, but couldn't so would like to ask for help if you can help me please
Thanks a lot in advance

So in looking at that example it looks like it's switching between showing and hiding the following password fields:
<input id="password-clear" type="text" value="Password" autocomplete="off" />
<input id="password-password" type="password" name="password" value="" autocomplete="off" />
I'm thinking that the height and width of the 2 inputs (password-clear and password-password) are different in your code, hence when you show one it is a different size. Make sure the CSS you are applying to both inputs is identical.
Update:
It seems IE is rendering some space from the input that's being hidden (pushing the other fields down). I fixed it in this fiddle by making both the password fields absolutely positioned and adding some separational divs.
http://jsfiddle.net/LqXnx/5/

PHP form validation - adding a validation tick box

I'm using this tutorial to try and make a form http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
My form works great but I have included 3 tick boxes that I want the user to tick before they can submit. Creating this validation has had me scratching my head all day!
I've tried making these custom fields but am pretty sure my syntax is wrong. I am well out of my depth here! The tutorial provides example that I tried to implement but the coding is too different for me to use on my form. This is what I tried:
<input type="checkbox" name="checkbox1" id="checkbox1" />
<label for="checkbox" value='<?php echo $formproc->SafeDisplay('email') ?>'</label><label for='Please tick the box before pressing submit' >
And then after the form, inside the script adding:
frmvalidator.addValidation("checkbox1","checkbox1","Please tick the box before pressing submit");
The form still submits but my validation doesn't happen. If anyone can point me in the right direction, that would be really incredible.
I'm not sure if it's the done thing to post the actual page I'm working on as it's my clients website?

It's in the documentation.
frmvalidator.addValidation("checkbox1","shouldselchk=on");

First you need to give value to your checkbox as below
<input type="checkbox" name="checkbox1" id="checkbox1" value="1"/>
Then, you need to pass type of validation in second argument of addValidation function as below
frmvalidator.addValidation("checkbox1","shouldselchk=1");