表单无效时的禁用按钮

当表单无效时用表单按钮不打开的情况下挣扎一下。当表单无效时该按钮无效，但当表单有效时仍然无效（保持禁用状态）。表单无效时的禁用按钮

这是一个基本的代码示例。

部件

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

表单无效时的禁用按钮

回答

相关问题