フォームが有効でないときにボタンを無効にする

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); 
    } 
} 

とだけformControlNameでngControlを置き換える形

<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

。 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>