Develop Reference

How to update `linkRef` in to `touched` state by function?

In my app, I use the linkRef in form. some reasons I require to update the linkRef to touched state, when i do getting error by function. what is the correct way to do this?
template:
<div *ngIf="linkRef.errors && (linkRef.dirty || linkRef.touched)" class="error" >
method:
addAdnlVasSelection(addVas, linkRef){
console.log('linkRef', linkRef);
if(!addVas.input || !linkRef.errors ){
linkRef.tourched(true); //notworks
linkRef.tourched = true; //notworks
return;
}
}
what is the correct way to do this?

Assuming that linkref has the form instance, try:
this.linkRef.markAsTouched()

how do i make js dectect whats typed in a input box

I'm trying to make js detect whats in a input box, and if the user typed in a code, something will happen so far I got this
function input() {
document.getElementById('hehe').value
if (value == "hello") {
window.alert("SOMETHING");
} else {
window.alert("SOMETHING");
}
}
<input id="hehe" type="text" oninput="input()">
but it's not working for some reason and I can't see why

you have to save the value before you can use it. document.getElementById('hehe').value RETURNS the value of the input textfield but in the next line you're using the non existing variable value.
just change it to:
function input() {
var value = document.getElementById('hehe').value
if (value == "hello") {
window.alert("SOMETHING");
} else {
window.alert("SOMETHING");
}
}
or use it directly:
function input() {
if (document.getElementById('hehe').value == "hello") {
window.alert("SOMETHING");
} else {
window.alert("SOMETHING");
}
}

You are not assigning the DOM element value to a variable. You should write:
var value = document.getElementById('hehe').value;
Or, using jQuery:
var value = $('#hehe').val();
However, another automated way to detect entered text, using KnockoutJS library, is data-bind. It automatically synchronizes the DOM element with your Model after applying the binding to your ModelView.
Here is an example: (jsfiddle)
HTML:
<p>Name: <input data-bind="textInput: name"></p>
<h1>The typed name is: <span data-bind="text: name"></span>.</h1>
JavaScript:
ko.applyBindings({
name: ko.observable("SOMETHING")
});

Use onkeypress instead of oninput.
http://jsfiddle.net/VDd6C/8/

Set Default Value for hidden field

I have a hidden field where i save a value when button is clicked. But on page load there is no value assigned to it. I need to know how to set default value of hidden field.
I am saving a string in hidden field when button is clicked and then access it in a JS function. But on page load the JS function return Undefined value error as the value of hidden field is not set on page load.
function Confirm() {
var nom = document.getElementById('hdNomValue').Value;
if (nom != "")
{
// logic here
}
}

You can simply try with this
function Confirm() {
var nom = document.getElementById('hdNomValue').Value;
if (nom) {
// logic here
}
}
So if(nom) will return true only when it has non-blank value. It'll return false if it is "" or undefined
Now the next thing, you need to make sure about the Id of the element. If you are using the asp.net hidden field with runat="server" then Id would be different than what are you expecting. So to make sure that Id remains same as you've given in asp.net markup, use ClientIdMode="Static"

you can also do this:
if (nom != "" || nom != undefined) {
//Your Logic
}

try to use this
if (nom !== "" && nom !== undefined)
so, your code should be rewritten as below
function Confirm() {
var nom = document.getElementById('hdNomValue').Value;
if (nom !== "" && nom !== undefined)
{
// logic here
}
}

Here for only text,password fields in html only you can give a default value attribute .But in the case of html
<input type="hidden" value="">
element the value would not be assigned by default.
If you want to use a hidden field with a default value use a text field with the property of display:none like
<input type="text" style="display:none" value="Default">
Or else if you are determined to use the hidden element only then you can go for a javascript based check solution like
var nom = document.getElementById('hdNomValue').Value;
if (nom != "" || nom != undefined)
{
}

what are you using jquery or javascript, if u are using jquery you may try to use
var nom = $('#hdNomValue').val();

Include IF statement in Javascript

I have written the script below with some help. I am now trying to combine with an IF Statement. Here is what I am trying to accomplish, if %%GLOBAL_Availability%%is empty, then do not display the button. Else, display the button and run the script.
I did some research and came up with the below:
if (%%GLOBAL_Availability%% ==""){
<div><input id="ShopButton" style="display: none";></div>
}
else {
<!--Amazon Shopping button-->
<div><input id="ShopButton" </div>
<script>
document.querySelector("#ShopButton").addEventListener("click",function(){
window.location.href='%%GLOBAL_Availability%%';
},false);
</script>
}
It did not work at all. I am VB.net, and just learning this hard way.
Any suggestions?
Thanks.

I'm assuming that your variable %%GLOBAL_AVAILABILITY%% is a string since you're testing that it's empty via testing that it's equal to a blank string.
In javascript I'd offer 2 tips for testing if a string exists or is empty.
1 - use the .length property of the String object.
2 - to check that it exists check that the type of %%GLOBAL_AVAILABILITY%% is a string use the identity operator === to check that the variable is of type string.
Your if statement should look like the below:
if(typeof %%GLOBAL_AVAILABILITY%% === typeof string && %%GLOBAL_AVAILABILITY%%.length > 0){
//execute code
}
Secondly, javascript is made to manipulate the DOM, so there's no need to insert new HTML based on a condition, you can just manipulate the properties of the existing HTML - in this case, setting the display property of '#ShopButton' to none.This can be achieved like this:
document.getElementById('ShopButton').style.display = "none";
So, your code should look like this:
if(typeof %%GLOBAL_AVAILABILITY%% === typeof string && %%GLOBAL_AVAILABILITY%%.length > 0){
document.getElementById('ShopButton').style.display = "none";
} else{
document.getElementById('ShopButton').style.display = ""; //MAKE VISIBLE
document.getQuerySelector('#ShopButton').addEventListener('click', function(){
document.location.href = '%%GLOBAL_AVAILABILITY%%';
});
}

It seems you want the input to be "display: none;" if the variable is empty, in which case you can just change the style attribute based on the variable. Something like:
<div><input id="ShopButton" style="display: none";></div>
<script>
if (%%GLOBAL_Availability%% == "") {
document.getElementById("ShopButton").style.display = "block";
document.querySelector("#ShopButton").addEventListener("click",function(){
window.location.href='%%GLOBAL_Availability%%';
},false);
}
</script>
This will simply render the element as invisible and then the script will make it visible if the variable isn't empty.

<div>
<input id="ShopButton" style="display: none";>
</div>
<script>
if (%%GLOBAL_Availability%% == "") {
document.getElementById("ShopButton").style.display = "block";
document.querySelector("#ShopButton").addEventListener("click",function(){
window.location.href='%%GLOBAL_Availability%%';
},false);
}
</script>
Is this what you're trying to do maybe?

Form validation. Optimize Angular ng-required expression

I'm creating a form validation and it becomes too ugly and heavy because of too many fields that need to be validated. I need to optimize it. So, I'm making required any field based on the other fields values using ng-required. When the user insert a value in one of the fields then the rest of them loose the required quality and the form becomes valid. So, for that I created an expression like this:
<input ng-model="field.one" ng-required="
!field.two &&
!field.three &&
!field.four &&
!field.five &&
!field.six &&
... &&
!filed.twenty"/>
<input ng-model="field.two" ng-required="
!field.one &&
!field.three &&
!field.four &&
!field.five &&
!field.six &&
... &&
!filed.twenty"/>
So, I intend to move the required expression in the controller or where you think it should be moved in order to optimize and organize the code. I was thinking to encapsulate it in a function inside of controller but I didn't succeed. I tried something like this:
VIEW
<input ng-model="field.one" ng-required="myFunc(field.one)"/>
CTRL
$scope.myFunc = function(modelField){
anything I tried in this fn I didn't make it to work syncronized with
the field models, updating their models based on user interaction :)
}
Please, is there someone that has an ideea how should be done? Thanks.

I would prefer one scope variable which is bound to all input field's ng-required attribute. And on change of any of the input field toggle this variable.
http://plnkr.co/edit/PVXVD9RKM8cMwCVjFA7c?p=preview
<input type="text" ng-change="onChange(userName1, 'name1')" name="name1" ng-model="userName1" ng-required="required">
<input type="text" ng-change="onChange(userName2, 'name2')" name="name2" ng-model="userName2" ng-required="required">
$scope.required = true;
$scope.userNames = [];
$scope.onChange = function(val, name) {
if (val) {
if ($scope.userNames.indexOf(name) == -1) {
$scope.userNames.push(name);
}
$scope.required = false;
} else {
if ($scope.userNames.indexOf(name) !== -1) {
$scope.userNames.splice($scope.userNames.indexOf(name), 1);
}
if ($scope.userNames.length === 0) {
$scope.required = true;
}
}
}