NativeScript/Angular - Le formulaire réactif ne fonctionne pas lorsque vous utilisez la barre d'action

Question

J'ai d'abord implémenté le code ci-dessous.

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)); 
} 

Quand je lance le code ci-dessus, il est tout va bien. Je reçois le nom et le nom correctement.

Le problème se produit lorsque j'essaie d'ajouter une barre d'actions à ce 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> 

Les app.component.ts reste le même. Lorsque j'exécute ce code et que j'appuie sur le bouton à l'intérieur de stacklayout, je reçois le nom et le nom correctement, mais quand j'appuie sur l'ActionItem, j'obtiens une chaîne vide pour le nom et le nom. Est-ce que je manque quelque chose?

Answer 1

Votre code semble très bien - en fait je l'ai re-testé avec this test application et tout fonctionne comme prévu de mon côté. Remarque: Si vous testez sur iOS, gardez à l'esprit que les journaux de console suivants ne peuvent être imprimés qu'une seule fois s'ils sont identiques. (this) Il se peut donc qu'il semble que le journal ne soit pas imprimé alors que l'action est terminée.