We Keep Coding

Where does Blazor store form data?

Interestingly, some input elements of Blazor Forms don't have the data stored in HTML as value (attribute) of the input-field. The fields doesn't even have a value attribute!
When I inspect and use 'Store as global object' functionality in chrome and check the value of the element in console (temp1.value), I can see the value.
I'm wondering where this value is being stored in the browser.

The value attribute is not set by changing the DOM's .value property.
Consider the following minimal example:
<input id=time>
<script>setInterval("time.value = new Date()", 1000);</script>
<input type=button onclick=alert(time.value) value=read>
You can inspect the clock and see that there's never a value attribute, yet the input's value property can be both setted and getted by script.
Thus, the value of the form input in your question can come from almost anywhere. It's likely embedded deep inside the other library support code that makes it easy to shuttle data back and forth, but that's speculation on my part. It's a JS variable of some sort, that much we know. The main thing is that attributes are not needed when making heavy use of JS.

Angular template variable reference

Here is a weird problem in Angular:
<input #pin1 type="password">
<p>You entered: {{pin1.value}}</p>
If you type something in <input>, the <p>'s content will not change which means pin1.value does not have value, does it mean the variable reference #pin1 does not work?
On the other hand, if we add a function to pass the reference, it will work.
<input #pin2 type="password" (input)="test(pin2)">
<p>You entered: {{pin2.value}}</p>
where test=function(x){console.log(x);}
For this <input>, if we type something, the the <p>'s content will change to corresponding text which implies #pin2 works.
So, the question is, in Angular, why we must use function to pass variable reference firstly then we can use it, why we cannot directly use variable reference.

Firstly, that is not how binding works.
What you did is creating a reference to input Dom object. At the time of the creation, the value of that Dom element (input) was empty. hence no value showing in your <p> tag.
if you want to see the value as you type then you are looking for a 2 way binding like so
<input [(ngModel)]="pin" type="password">
<p>You entered: {{pin}}</p>
Assuming that pin is declared in your ts file.
As to why the value was updating when you introduces a function, the answer is because Angular will be calling that function test(pin2) whenever you type something into that input which results in running a detect change on the model.
Long story short, Angular is a Model driven framework, if you need a value, you shouldn't need to get the DOM element to get the value from there.

I may get an ambiguous answer, it may be related to event binding, which means "view-to-source", if we didn't bind any event, the view (user interaction) cannot pass data to source (the component class), so variable reference may not work, but there are still some question like the template references should not be related to source side, since such variables aren't member/properties of component class.

it is so werired behaviour in angular
this code not working
<input #inputval type="text" />
<app-newcomp [testValue]="inputva.value"></app-newcomp>
but if you add "input" event to the input element then it will work
<input #inputval type="text" (input)="someFunctionInTs($event)" />
<app-newcomp [testValue]="inputva.value"></app-newcomp>

VueJS - How to apply directives to all matching tags?

I'd like to apply a directive to all input tags programmatically. Two reasons for this are:
I don't want to have to go through all inputs in my app to add the directive
If I want to change the directive against all inputs at a later date, it's in one place.
Is this possible? I've reviewed the docs but they don't seem to mention applying it in any other way than applying the tag directly to the element.
My current code is like so:
<input type="text" class="form-control input-sm" id="price" v-model="model.doc.price" v-floating-label>

I was having a brain dead moment it seems. I just need an input component. I can then change what I need on there and it will update everywhere the input component has been used and instead of using the standard html input tag, I'll use my component.
Long day ...
I've answered this question myself instead of deleting it in case anybody else has the same brain dead moment in the future ;)

As per Evan You:
Vue.js compilation happens when you instantiate/mount the root instance.
See https://github.com/vuejs/Discussion/issues/77#issuecomment-60339440
I don't think what your are trying to do is sane: search and replace, coming out of the box in many text editors or IDE, will be really helpful for your two explained reasons.

You can bind that directive to a condition like so
<input type="text"
class="form-control input-sm"
id="price"
v-model="model.doc.price"
:v-floating-label=(condition)>
If condition == true , v-model-float directive will be applied to your input.
Update 1: From the comments, the implementation will still be the same, except you control the condition from one place. That way, you can remove the directive at a later date by simply setting that condition to false.

Angularjs validation with expression

I'm trying to implement input validation by angular expression ,I need to do that because i'm going to get validation data from database.
So I'm trying the following code
conttroller
vm.key="ng-required"
vm.value="true"
html
<input type="text" name="field" ng-model="name" {{vm.key}}="{{vm.value}}" >
but this make no change.

You can't use {{}} directive to create attribute dynamically(it will not work), and I don't think so that would be correct approach to do it. I'd like to suggest slight different way to deal with such validation, like you could take use of angular inbuilt directive like ng-minlength, ng-maxlength, ng-required, etc. which does take expression as their attribute values.
like for case it would be something like
ng-required="vm.value"

AngularJS - Bind input to value with filter and update it

I have an input bound to an object property and with a filter applied to it.
<input value="{{object.field | filter}}">
The problem is that if I programmatically change object.field, the value displayed inside the input doesn't change, however in the DOM Inspector I see the correct (new) value. I verified to digest/apply the changes to the scope and the object.field variable does change correctly, the issue seems to be only in the input displayed value.
I cannot provide an example since there's too much code involved.
Does anyone know where I should look for errors??

No need to set value in that way. ng-model takes care of it.
Valid syntax is:
<input ng-model="object.field">
For filtering you can look at this answer:
Using angularjs filter in input element

I think you should use ng-model to bind your data into input box instead {{expression}}