Ionic 2 - Как отключить кнопку, если нет интернет + действительная форма

Question

Я пытаюсь создать форму здесь, используя Ionic 2 + Angular 2. Эта форма является модельной формой формы, и все проверки выполняются с использованием валидаторы. Кроме того, есть два наблюдаемых, которые проверяют наличие интернет-соединения.

Я не нашел способ сохранить кнопку отправки отключенной, пока нет подключения к интернету, и форма недействительна. Как я мог заставить эти две вещи работать вместе?

Вот как выглядит код до сих пор:

survey.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</small></ion-label> 
      <ion-radio value="owner"></ion-radio> 
      </ion-item> 
      <ion-item> 
      <ion-label><small>O terreno é arrendado</small></ion-label> 
      <ion-radio value="lease"></ion-radio> 
      </ion-item> 
      <ion-item> 
      <ion-label><small>Outro</small></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); 
    } 
} 

Заранее спасибо :)

Answer 1

You wou Возможно, вам понадобится plugin, чтобы узнать, находитесь ли вы в сети/в автономном режиме. На самом деле его в ionic native.

import { Network } from 'ionic-native'; 

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

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

Из вашего кода видно, что вы используете статус уаг; это означает, что собственность является частной. Таким образом, вы должны определить статус в области видимости класса, чтобы быть видимым в шаблоне