Discussion :

[keokaz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[keokaz]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
@Input()  nomMatiere: string;