Je construis une application angular2 standard (plus spécifique une application todo). J'ai également ajouté @ Ngrx / store.

La première fois que je charge la page, le bouton est désactivé, mais lorsque j'entre une valeur dans la zone de saisie, le bouton doit être activé, mais il reste désactivé ...

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);
  }
}
0
Aytacworld 15 janv. 2017 à 21:55

2 réponses

Meilleure réponse

De la documentation https://angular.io/docs/ts/latest/guide /forms.html Suivre l'état des modifications et la validité des contrôles de formulaire à l'aide de ngModel ...

Mettez à jour votre code pour utiliser ngModel et cela devrait fonctionner comme prévu

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);
  }
}
1
Evans M. 15 janv. 2017 à 20:32

Et si vous procédez de cette façon:

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);
  }
}
0
user776686 15 janv. 2017 à 19:56