无法在内容之外提交带有按钮的表单（Ionic 4）

Question

我使用模态来显示一个表单，在模态的标题中我有一个'完成'按钮，我用它来提交表单。因为这个按钮在标题标签中，而表单在内容标签中，我使用这样的ngForm来提交表单...

<ion-header>

<ion-toolbar>
    <ion-buttons slot="start">
        <ion-button color="primary" (click)="goBack()">Back</ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
        <ion-button color="primary" [disabled]="!profileForm.dirty || !profileForm.valid" (click)="goBack()">Save</ion-button>
    </ion-buttons>
    <ion-title>Profil</ion-title>
</ion-toolbar>

<ion-content color="medium" *ngIf="logged">

<form #profileForm="ngForm" name="profileForm" id="profileForm" novalidate>

export class ProfilePage implements OnInit {

@ViewChild('profileForm') form: NgForm;

预期行为用户应该能够在表单外提交带有离子按钮的表单。

Answer 1

如果你使用反应形式，你就不会有这个问题;）我强烈建议你这样做！但这是您当前问题的解决方案。

所以，如果你没有*ngIf，你的代码实际上是可行的。结构指令将模板引用变量范围扩展到结构指令中的内容，因为angular实际上为其创建了一个单独的模板。但是，由于您使用@ViewChild来获取该模板引用，因此您可以在代码中使用它。所以改变......

<ion-button [disabled]="!profileForm.dirty || !profileForm.valid" (click)="save()">

至...

<ion-button [disabled]="!form?.dirty || !form?.valid" (click)="save()">

我们需要使用安全导航操作符，因为在呈现模板时，我们还无法访问form变量。

Answer 2

您可以更改视图，以便按钮处于以下形式：

<form>
    <ion-header>
       //submit button here
    </ion-header>
    <ion-content>
       //form here
    </ion-content>
</form>

或者只是在“保存”按钮的(click)处理程序中执行任何操作。