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

<TextField loaded="onTextFieldLoaded"></TextField>

JS

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

function onTextChange(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(){
  
});

function validate(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>
  <label for="username"><input type="text" id="username" name="username" onkeyup="validate(event)"/></label>
  <label for="password"><input type="password" id="password" name="password" onkeyup="validate(event)"/></label>
  <button id="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?

<TextField hint="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