NativeScript using 2way Databinding - nativescript

Question

My input isn't accepted or something is off because my code is right.
in my item-detail.component.html is this code:
<StackLayout class="nt-form chat-wrapper" >
<StackLayout id="chat-form" orientation="horizontal" class="nt-input input-field form">
<TextField [(ngModel)]="usero" width="800px" class="-rounded-lg input" hint="Nachricht" style="background-color: #ffffff;"></TextField>
<button width="120px" class="-rounded-lg fa far fas fab" (tap)="sendMessage()" style="margin-left: 15px;" text=""></button>
</StackLayout>
</StackLayout>
and my item-detail.component.ts is this code:
import { DatePipe } from "#angular/common";
import { Component, OnInit } from "#angular/core";
import { ActivatedRoute } from "#angular/router";
import { FormatListNumbered } from "#material-ui/icons";
import { RouterExtensions } from "#nativescript/angular";
import { resolveFileNameFromUrl } from "#nativescript/core";
import { connectableObservableDescriptor } from "rxjs/internal/observable/ConnectableObservable";
import { ChatService, DataChat } from "../shared/chat.service";
import { FormControl } from '#angular/forms';
import { UserService, DataUser } from "../shared/user.service";
#Component({
selector: "ItemDetail",
styleUrls: ['item-detail.component.css'],
templateUrl: "./item-detail.component.html",
providers: [DatePipe]
})
export class ItemDetailComponent implements OnInit {
usero = "";
constructor(){};
sendMessage(): void{
console.log("usero", this.usero);
}
item-detail.module.ts is this:
import { NativeScriptFormsModule } from "#nativescript/angular";
import { NativeScriptCommonModule } from "#nativescript/angular/common";
import { ItemDetailComponent } from "./item-detail.component";
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
#NgModule({
imports: [
NativeScriptFormsModule,
NativeScriptCommonModule
],
declarations: [
ItemDetailComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class ItemDetailModule { }
and my app.module.ts is this:
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptFormsModule, NativeScriptModule } from "#nativescript/angular";
import { FormsModule} from '#angular/forms'
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BrowserModule } from '#angular/platform-browser';
#NgModule({
bootstrap: [
AppComponent
],
imports: [
FormsModule,
BrowserModule,
NativeScriptModule,
NativeScriptFormsModule,
AppRoutingModule,
NativeScriptFormsModule
],
declarations: [
AppComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
So everythin that i should do is done. But for whatever reason it doesnt work the variable is empty.

Answer 1

For anyone getting on the same issue:
In the NativeScript docs is a good doc for TextField:
https://docs.nativescript.org/angular/ui/ng-components/text-field
So my textfield looks like this:
<TextField
(textChange)="onTextChange($event)"
width="800px"
class="-rounded-lg input"
hint="Nachricht"
style="background-color: #ffffff;"
></TextField>
and my ts like this:
onTextChange(args){
let textField = <TextField>args.object;
this.text = textField.text;
}
And if the Button is pressed this function is called:
sendMessage(): void{
console.log("textfield", this.text);
}