Question

我正在尝试使用Ionic 2 + Angular 2构建表单。此表单是模型驱动的表单类型，所有验证都是使用Validators进行的。另外，有两个Observable可以检查是否有互联网连接。

我没有找到一种方法来保持提交按钮被禁用，而没有互联网连接且表单无效。我怎么能让这两件事一起工作呢？

到目前为止，这是代码的样子：

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 status; ，这意味着该属性是私有的。因此，您应该在类范围中定义状态以在模板

中可见

离子2 - 如果没有互联网+有效表格，我如何禁用按钮

1 个答案: