angular - Ionic 2 - Hur kan jag inaktivera en knapp om det inte finns någon internetanslutning + giltigt formulär

Jag försöker bygga ett formulär här med Ionic 2 + Angular 2. Detta formulär är av typen modellstyrt formulär, och all validering görs med Validators. Dessutom finns det två Observable som kontrollerar om det finns internetanslutning.

Jag har inte hittat ett sätt att hålla skicka-knappen inaktiverad medan det inte finns någon internetanslutning och formuläret inte är giltigt. Hur skulle jag kunna få dessa två saker att fungera tillsammans?

Så här ser koden ut hittills:

undersökning.html

 <ion-header class="main-header">
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Questionário</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form [formGroup]="form" (ngSubmit)="onSubmit()" class="form-bg" novalidate>
    <div class="form-content">
      <h5>1. Perfil do Fazendeiro</h5>
      <div class="question">
        <p><strong>1.1</strong> Em que perfil você se qualifica?</p>
        <ion-list radio-group formControlName="isPropertyOwner">
          <ion-item>
            <ion-label><small>Proprietário do terreno</ion-label>
            <ion-radio value="owner"></ion-radio>
          </ion-item>
          <ion-item>
            <ion-label><small>O terreno é arrendado</ion-label>
            <ion-radio value="lease"></ion-radio>
          </ion-item>
          <ion-item>
            <ion-label><small>Outro</ion-label>
            <ion-radio value="other"></ion-radio>
          </ion-item>
        </ion-list>
      </div>
    <br>
    <button ion-button type="submit" block [disabled]="enableBtn()">Enviar</button>
    </div>
  </form>
</ion-content>

survey.ts

import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';

@Component({
  selector: 'page-survey',
  templateUrl: 'survey.html'
})

export class Survey {

  form: FormGroup;

  constructor(public alerCtrl: AlertController, public navCtrl: NavController,public toastCtrl: ToastController, public navParams: NavParams, public formBuilder: FormBuilder) {

    this.form = formBuilder.group({
      "isPropertyOwner": ["", Validators.required]

    });

    /* Check if it's online/offline */
    var offline = Observable.fromEvent(document, "offline");
    var online = Observable.fromEvent(document, "online");
    var status;

    offline.subscribe(() => {
      status = false;
    });

    online.subscribe(() => {
        status = true;
    });
  }

  enableBtn() {
    if (this.form.valid && status) {
      return true
    }
    else return false;
  }

  onSubmit() {
    console.log("model-based form submitted");
    console.log(this.form);
  }
}

Tack i förväg :)

Svar #1

Du skulle förmodligen behöva ett plugin för att se om du är online/offline. Faktiskt är det i Ionic Native.

import { Network } from 'ionic-native';

let disconnectSubscription = Network.onDisconnect().subscribe(() => {
  this.status = false;
});

let connectSubscription = Network.onConnect().subscribe(() => {
  this.status = true;
});

Från din kod ser jag att du använder var status;, det betyder att egenskapen är privat. Så du bör definiera status i klassens omfång för att vara synlig i mallen