Ionic 2 - 如果没有互联网 + 有效表单，我如何禁用按钮

Posted 2023-03-13

【中文标题】Ionic 2 - 如果没有互联网 + 有效表单，我如何禁用按钮

【英文标题】：Ionic 2 - How can I disable a button if there's no internet + valid form

【发布时间】：2017-04-28 00:03:11

【问题描述】：

我正在尝试使用 Ionic 2 + Angular 2 构建一个表单。这个表单是模型驱动的表单类型，所有验证都是使用验证器进行的。另外，还有两个 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);
  

提前致谢:)

【参考方案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; 这意味着该属性是私有的。所以你应该在类范围内定义状态以在模板中可见

【讨论】：

非常感谢 Volodymyr，这样可以更轻松地检查是否有网络连接。但是，有没有办法将此事件更改器与表单验证本身相关联？我只是想不出办法做到这一点:(

@CaikeMotta 您遇到的问题是您的状态仅在构造函数中可见。在类范围内定义它，就像你在表单中所做的那样

我修复了它，正如你提到的那样在类范围内定义它。虽然我必须做一些其他事情才能使我的逻辑按预期工作：<button ion-button type="submit" block [disabled]="!this.form.valid || hasConnection()">Send</button> 现在它检查表单验证和连接，所以我不得不用 || 替换 &&反而。感谢您的帮助，我很感激！ :)