Ионная 3: $ грязная кнопка показывает

Question

Я бы хотел, чтобы моя кнопка «Сохранить» отображалась / была доступна только для клика, если данные введены в форму. Я не могу понять логику этого, но вот что я сделал до сих пор:

HTML-файл:

<ion-list>
    <ion-item>
        <ion-label>City Name:</ion-label>
        <ion-input name="City" placeholder="City"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label>State Name:</ion-label>
        <ion-input name="state" placeholder="state"></ion-input>
    </ion-item>

</ion-list>

<button ion-button *ngIf="dirty == true" (click)="saveChanges()> Save </button>

Я считаю, что проблема заключается в теге <button>

Answer 1

Вы должны запустить функцию проверки, которая проверит, не являются ли оба входа пустыми

.HTML файл

<ion-list>
    <ion-item>
        <ion-label>City Name:</ion-label>
        <ion-input type="text" [(ngModel)]="city" (ionChange)="change();" placeholder="city"></ion-input>
    </ion-item>

    <ion-item>
        <ion-label>State Name:</ion-label>
        <ion-input type="text" [(ngModel)]="state" (ionChange)="change();" placeholder="state"></ion-input>
    </ion-item>

</ion-list>

<button ion-button *ngIf="dirty == true" (click)="saveChanges()> Save </button>

.ts file

    export class <YOUR_CLASS> {

    city;
    state;

    constructor {...}

   change() {
    if (this.city !== "" && this.state !== "") {
       //Enable button
    }

    }
    }

Answer 2

вы можете использовать два подхода для этой вещи я> реактивная угловая форма (https://angular.io/guide/reactive-forms) ii> используйте onchange на входе и проверьте, что они имеют действительные данные

* ngIf = "dirty" // в поле зрения

и сделайте грязный флаг истинным, если форма заполнена правильно.