表單無效時的禁用按鈕

當表單無效時用表單按鈕不打開的情況下掙扎一下。當表單無效時該按鈕無效，但當表單有效時仍然無效（保持禁用狀態）。表單無效時的禁用按鈕

這是一個基本的代碼示例。

部件

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>

來源

2016-09-25 Arianule

如果用formControlName替換ngControl什麼？ –

這樣做的工作!! ...謝謝你 – Arianule

與formControlName只需更換ngControl。您的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>

來源

2016-09-25 11:21:54

表單無效時的禁用按鈕

回答

相關問題