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)处理程序中做任何事情即可。

无法通过内容之外的按钮提交表单（Ionic 4）

2 个答案: