Отключить кнопку, когда форма недействительна

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>