Невозможно отправить форму с кнопкой за пределами содержимого (Ionic 4)

Я использую модал для отображения формы, а в заголовке модала у меня есть кнопка "Готово", которую я использую для отправки формы. Поскольку эта кнопка находится в тегах заголовка, а форма - в тегах содержимого, я использую 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;

Ожидаемое поведение Пользователи должны иметь возможность отправить форму с помощью кнопки-кнопки за пределами формы.

Источник

2 ответа

Решение

Если бы вы использовали реактивную форму, у вас не было бы этой проблемы вообще;) Я настоятельно рекомендую вам сделать это! Но вот решение для вашей текущей проблемы.

Таким образом, ваш код будет работать, если бы вы не имели *ngIf, Структурные директивы охватывают ссылочные переменные шаблона только тем, что находится внутри этой структурной директивы, поскольку angular фактически создает для этого отдельный шаблон. Но так как вы используете @ViewChild чтобы получить ссылку на этот шаблон, это то, что вы можете использовать в своем коде. Так что меняйся...

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

чтобы...

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

Нам нужно использовать оператор безопасной навигации, так как при визуализации шаблона у нас еще нет доступа к form переменная.

Источник

Вы можете изменить вид так, чтобы кнопка была в форме:

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

Или просто делай все, что тебе нужно в (click) обработчик кнопки "Сохранить".

Источник
Другие вопросы по тегам