NativeScript/Angular - Reactive form not working when using actionbar


#1

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?