NativeScript: Disable all controls while ActivityIndicator is shown

Question

Lets say there is a login page with username\password TextFields and login Button. When the button is pressed a request is set to a server and ActivityIndicator is shown. Currently I put StackLayout on top of all other controls not to give the user a possibility to click on them while processing the request. But in some cases TextField stays focused and the user can type there.

I'm already using a component to wrap all TextFields to show validation errors:

@Component({
  selector: "field",
  template: "<grid-layout><ng-content></ng-content>...</grid-layout>"
})
export class FieldComponent {
  @ContentChild(NgModel) private input: NgModel;
  ...
}

My question is can I set isEnabled property to false on TextField inside ng-content from FieldComponent having NgModel or in some another way? If it is impossible what is the best practices in this case to disable inputs when an app is busy?

Answer 1

There are a couple way you can do this;

1. You can use a ngIf or binding on isEnabled to disable it based on a data bound value.

2. You can create a simple routine that you call (my preferred method).

require("nativescript-dom"); 
function screenEnabled(isEnabled) {
       runAgainstTagNames('TextEdit', function(e) { e.isEnabled = isEnabled; });
       runAgainstTagNames('Button', function(e) { e.isEnabled = isEnabled; }); 
}

The nativescript-dom plugin has the runAgainst*, or getElementBy* wrappers to talk to the native layer like you were talking to a html dom.

Full disclosure, I'm the author of nativescript-dom, it is one of the plugins that I use in almost every app/demo I do.