表单无效时禁用按钮

Question

当表单无效时，无法启用表单按钮有点困难。该按钮在表单无效时无效，但在表单有效时不启用（保持禁用状态）。

这是代码的基本示例。

组件

import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FormGroup, FormControl, FormBuilder, Validators  }  from '@angular/forms';

@Component({
 templateUrl: 'build/pages/opportunity/opportunity.html'
})
export class OpportunityPage implements OnInit {

   public opportunityAddForm: any;
        constructor(public navCtrl: NavController, private _formBuilder: FormBuilder)         {

  }
  ngOnInit() {
     this.opportunityAddForm = this._formBuilder.group({
     clientEmail: ["", Validators.required],
     opportunityAdd: ["", Validators.required]
  })
 }
 submitOpportunityForm(): void {
 console.log(this.opportunityAddForm.value);
  }
 }

和表格

<ion-header>
 <ion-navbar>
   <ion-title>
     ADD OPPORTUNITY
   </ion-title>
 </ion-navbar>

<ion-content padding class="Opportunity">
   <form  [formGroup]="opportunityAddForm" novalidate (submit)=submitOpportunityForm()>
    <ion-list>    
      <ion-item>
    <ion-label>Client email</ion-label>
    <ion-input type="email" ngControl="clientEmail" placeholder="Please add client emails"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Opportunity name</ion-label>
    <ion-input type="text" ngControl="opportunityAdd" placeholder="Add an opportunity name"></ion-input>
  </ion-item>
  <div padding>
    <button block [disabled]="!opportunityAddForm.valid">Add opportunity</button>
    </div>
    </ion-list>
  </form>
 </ion-content>

Answer 1

只需将 ngControl 替换为 formControlName。您的 this.opportunityAddForm 找不到要验证的控件。

示例：

<ion-input type="email" ngControl="clientEmail" placeholder="Please add client emails"></ion-input>

更改为：

<ion-input type="email" formControlName="clientEmail" placeholder="Please add client emails"></ion-input>

表单无效时禁用按钮

Disabling button when form is not valid

ionic2

angular