Question

当表单无效时，表单按钮无法启用时稍微苦苦挣扎。当表单无效时该按钮无效，但在表单有效时未启用（保持禁用状态）。

以下是代码的基本示例。

成分</ P>

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>

表单无效时禁用按钮

1 个答案: