[Angular 2] Inhiber keyup.enter champs vides

bonsoir, je suis entrain d' écrire un tuto sur le single page avec angular2:

http://profoad.education/moodle3/mod...iew.php?id=706

j'ai un champs à remplir, si le champs est vide j'interdis d'enregistrer le champs:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<h3>Ajouter +++++++:</h3>   <div class="row"> <div class="col-sm-6"> <input #matiereNameBox class="form-control input-lg" type="text" placeholder="nom de la nouvelle matière" (keyup)="nomMatiere=matiereNameBox.value" (keyup.enter)="saisirMat(nomMatiere) "> </div>   </div> <div class="row" style="margin-top: 12px;"> <div class="col-sm-6"> <button class="btn btn-success btn" [disabled]="!nomMatiere" (click)="saisirMat(nomMatiere)"> Add </button> <button class="btn btn-warning btn" (click)="annuler()"> Cancel </button> </div> </div>

---

ici c'est [disabled]="!nomMatiere" que le permet,
par contre je peux aussi valider avec la touche entrer, comment peut t'on faire simple pour avoir
le même comportement ?

merci de vos réponses :)

Code:

---

1 2	(keyup)="nomMatiere=matiereNameBox.value"

---

tu met une fonction à la place.
dans la fonction tu gère l'appui de la nouvelle touche comme tu veux

merci de ta réponse, je sais pas si j'ai bien exprimer le problème

Code:

---

1 2	(keyup.enter)="saisirMat(nomMatiere) "

---

lorsque je tape sur la touche entrer, ma liste de matière se remplit mais elle est vide, par exemple si fait ceci:

Code:

---

1 2 3 4 5 6 7 8 9

<input #matiereNameBox class="form-control input-lg" type="text" placeholder="nom de la nouvelle matière" [disabled]="!matiereNameBox.value" // <= tant que je n'ai pas pas saisie un seul caractère (keyup)="nomMatiere=matiereNameBox.value" (keyup.enter)="saisirMat(nomMatiere) ">

---

le problème c'est qu'ici le champs est grisé, je ne peux pas saisir une chaine,
est ce qu'il faut dans la méthode saisirMath() si le paramètre est vide, on représente le formulaire ou
qu'il faut faire quelque chose qui ressemble à ceci ?

Code:

---

1 2 3 4

<input   [disabled]="matiereNameBox.value.length==0 "

---

et si je clique sur le champ un blur, on met [disabled] = none ...

Ou sinon si cela ne fonctionne directement avec la valeur des attributs , considérer qu'un entrer avec un champs vide veut dire qu'on annule le formulaire:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

import {Component,Input,Output,EventEmitter} from '@angular/core'; import {SommaireGestionService} from './sommaire-gestion';   @Component({ selector: 'ajout-matiere', templateUrl: './app/sommaire/sommaire-ajout.template.html',   })   export class AjoutMatiereComponent {   @Output() onLst = new EventEmitter(); nomMatiere: string;   constructor(private sommaireService: SommaireGestionService) { }   saisirMat(matiere:string){ let nb_chaine = matiere.lenght; if(nb_chaine == 0) //si la chaine est vide, on annule le formulaire { this.annuler(); }else{ this.sommaireService.addMatiere({id: 0, name:this.nomMatiere}); this.onLst.emit(null); }   annuler(){ this.onLst.emit(null); }   }

---

cette solution je l'ai testé mais elle est brutal pour l'ergonomie en tapant sur la touche entrer

Code:

---

1 2	@Input() nomMatiere: string;

---