Call Function When Input Is Changed On Text Box?

I'm trying to create a button that changes color when username and password fields have both been entered with some sort of input (IE; neither username or password text boxes are e

Solution 1:

If you are using plain JavaScript / TypeScript without any framework, then you must add your textChange listener after loaded event.

XML

<TextFieldloaded="onTextFieldLoaded"></TextField>

JS

functiononTextFieldLoaded(args) {
  const textField = args.object;
  textField.off("loaded");
  textField.on("textChange", onTextChange);
}

functiononTextChange(args) {
  console.log("Changed: " + args.value);
}

Here is a Playground Sample.

Solution 2:

You can use onkeyup event to trigger the validation for the form.

See the Snippet below:

document.addEventListener("load", function(){
  
});

functionvalidate(event){
  if(document.getElementById("username").value.trim()!="" && document.getElementById("password").value.trim()!=""){
    document.getElementById("btn").removeAttribute("disabled");
  }else{ 
    document.getElementById("btn").setAttribute("disabled", "disabled");
  }
}

.enable{
  
}

<div><labelfor="username"><inputtype="text"id="username"name="username"onkeyup="validate(event)"/></label><labelfor="password"><inputtype="password"id="password"name="password"onkeyup="validate(event)"/></label><buttonid="btn"value="Submit"disabled>Submit</button></div>

Solution 3:

Edited my whole answer because I initially gave you a whole demo in Javascript lol. Maybe someone with a lot of reputation points should make a Nativescript tag.

Anyway, have you tried it like this?

<TextFieldhint="Enter text"text="" (textChange)="myFunction($event)"></TextField>

OR

var el = page.getViewById("myEl");
el.on("textChange", myFunction);

function myFunction() {
   console.log('woo');
}

And here's some relevant-looking documentation: https://docs.nativescript.org/angular/ui/ng-ui-widgets/text-field#text-field-binding