ng2 [無効] = "！myInput.value"は正しく動作しません。

Question

私は標準のangle2アプリ（より具体的にはtodoアプリ）を構築しています。私も@Ngrx/storeを追加しました。

私はページをロードする最初の時間は、ボタンは無効になりますが、私は入力ボックスにいくつかの値を入力すると、ボタンを有効にする必要があり、それが無効になったまま...

app/app.component.ts

import { Component } from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'my-app', 
 
    template: ` 
 
    <h1>Hello {{name}}</h1> 
 
    <div> 
 
    <add-todo></add-todo> 
 
    </div>`, 
 
}) 
 
export class AppComponent { name = 'Angular'; }

app/components/add-todo/add-todo.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core'; 
 

 
@Component({ 
 
    moduleId: module.id, 
 
    selector: 'add-todo', 
 
    template: ` 
 
    Create new todo 
 
    <input #myInput /> 
 
    <button (click)="addTodo()" [disabled]="!myInput.value">Add</button>` 
 
}) 
 
export class AddTodoComponent { 
 
    @ViewChild('myInput') input: ElementRef; 
 

 
    constructor() {} 
 

 
    addTodo(): void { 
 
    alert(this.input.nativeElement.value); 
 
    } 
 
}

Answer 1

を使用するようにコードを更新...

をngModelを使用して、フォームコントロールの変化状態と有効性を追跡ngModelと期待どおりに動作するはずです

import { Component, ViewChild, ElementRef } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'add-todo', 
    template: ` 
    Create new todo 
    <input #myInput [(ngModel)]="inputFieldValue" /> 
    <button (click)="addTodo()" [disabled]="!myInput.value">Add</button>` 
}) 
export class AddTodoComponent { 

    @ViewChild('myInput') input: ElementRef; 
    public inputFieldValue:string = ''; 

    constructor() {} 

    addTodo(): void { 
    alert(this.input.nativeElement.value); 
    } 
} 

Answer 2

あなたはこの方法で何をしている場合：ドキュメントhttps://angular.io/docs/ts/latest/guide/forms.htmlから

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'add-todo', 
    template: ` 
    Create new todo 
    <input #todoTitleInput [(ngModel)]="todoTitle"/> 
    <button (click)="addTodo(todoTitleInput.value)" [disabled]="!todoTitle">Add</button> 
    `, 
}) 
export class AddTodoComponent { 
    addTodo(title: string): void { 
    alert(title); 
    } 
}