Ionic 2 - インターネット+有効なフォームがない場合、ボタンを無効にするには

Question

ここでIonic 2 + Angular 2を使用してフォームを作成しようとしています。このフォームはModel Drivenフォームタイプであり、バリデータ。さらに、インターネットに接続しているかどうかをチェックするObservableが2つあります。

インターネット接続がなく、フォームが有効でない間に送信ボタンを無効にする方法が見つかりませんでした。どのように私はこれら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

あなたオンライン/オフラインかどうかを確認するには、おそらくpluginが必要です。実際にはionic nativeです。

import { Network } from 'ionic-native'; 

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

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

コードからは、使用中のコードが表示されます。ステータスはvarです。これはプロパティがプライベートであることを意味します。したがって、クラススコープのステータスをテンプレートで表示するように定義する必要があります