NativeScript/Angular - Reactive form not working when using actionbar - nativescript

Question

First I implemented the code below.
app.component.html
<StackLayout [formGroup]="form">
<label text="Name"></label>
<TextField formControlName="Name"></TextField>
<label text="Last Name"></label>
<TextField formControlName="LastName"></TextField>
<button text="save" (tap)="save()"></button>
</StackLayout>
app.component.ts
public form: FormGroup;
constructor(private fb: FormBuilder){
this.form = this.fb.group({
"Name": ["", [Validators.required]],
"LastName": ["", [Validators.required]]
});
}
public save(){
console.log(JSON.stringify(this.form.value));
}
When I run the code above, it's everything alright. I get name and lastname correctly.
The problem occurs when I try to add an action bar to this code.
app.component.html
<ActionBar title="New" class="action-bar">
<ActionItem text="save" (tap)="save()"></ActionItem>
</ActionBar>
<StackLayout [formGroup]="form">
<label text="Name"></label>
<TextField formControlName="Name"></TextField>
<label text="Last Name"></label>
<TextField formControlName="LastName"></TextField>
<button text="save" (tap)="save()"></button>
</StackLayout>
The app.component.ts remains the same.
When I run this code and tap the button inside stacklayout I get name and lastname correctly but when I tap the ActionItem I get an empty string for both name and lastname. Am I missing something?

Answer 1

Your code looks just fine - in fact I have re=-tested it with this test application and everything works as expected on my side.
Side note: If testing on iOS keep in mind that subsequent console logs can be printed only once if they are identical. (this) so it might be that it appears that the log is not printed when in fact the action is done.