Question

在我的代码中，我有按钮，只要表单无效或不脏，就会被禁用。

我有：

<button type="submit" [disabled]="!myForm.valid || myForm.dirty" class="save-button">Save</button>

让我失望

EXCEPTION：Expression'！myForm.valid || myFromComponent @ 58：38'中的myForm.dirty）在检查后发生了变化。上一个值：'true'。当前值：[！myForm.valid ||中的'false' myFromComponent @ 58：38中的myForm.dirty

每当有效/脏的变化。

有什么想法吗？

更新

当我启用生产模式时它会起作用：

enableProdMode()

Answer 1

我认为这也有助于达到目的。

[disabled]="!myForm.valid || !myForm.dirty"

Answer 2

这是联系表格示例，请查看此内容。

HTML文件

<form (ngSubmit)="contactSubmit()" #contactForm="ngForm">
    <div class="form-group">
        <label for="exampleInputEmail1">Name</label>
        <input type="text" class="form-control" placeholder="Name" required ngControl="name"  #name="ngForm" [(ngModel)]="cForm.name">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" placeholder="Email" required ngControl="email"  #email="ngForm" [(ngModel)]="cForm.email">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">Message</label>
        <textarea class="form-control" placeholder="Message" required  ngControl="message" #message="ngForm" [(ngModel)]="cForm.message" ></textarea>
    </div>
    <button type="submit" class="btn btn-default" [disabled]="!contactForm.form.valid">Submit</button>
    <button type="button" class="btn btn-default" (click)="newcForm()" >New Form</button>
</form>

TS文件

import {Component} from 'angular2/core';
import {NgForm}    from 'angular2/common';

@Component({
  selector: 'my-app',
  providers: [],
  templateUrl: 'contact-us.component.html',
  directives: []
})
export class App {
   public cForm = new contactForm('','','');
    submitted = false;
    active = true;

    contactSubmit(){
        this.submitted = true;
    }
    newcForm(){
        this.cForm = new contactForm('','','');
        this.active = false;
        setTimeout(()=> this.active=true, 0);        
    }
}

export class contactForm {
    constructor(
        public name: number,
        public email: string,
        public message: string
    ) {  }
}

点击here获取plunker示例

Angular2和禁用按钮异常

2 个答案: