anchor.diff:    'new-hero-v1', 
     'app/hero-form.component.ts (New Hero method - v1)')(format=".")
   :marked
  -  Run the application again, click the *New Hero* button, and the form clears.
  -  The *required* bars to the left of the input box are red, indicating invalid `name` and `power` properties.
  -  That's understandable as these are required fields. 
  -  The error messages are hidden because the form is pristine; we haven't changed anything yet.
  -  
  -  Enter a name and click *New Hero* again.
  -  This time we see an error message! Why? We don't want that when we display a new (empty) hero.
  -  
  -  Inspecting the element in the browser tools reveals that the *name* input box is no longer pristine.
  -  Replacing the hero *did not restore the pristine state* of the control.
  -.l-sub-section
  -  :marked
  -    Upon reflection, we realize that Angular cannot distinguish between
  -    replacing the entire hero and clearing the `name` property programmatically.
  -    Angular makes no assumptions and leaves the control in its current, dirty state.
  -:marked
  -  We'll have to reset the form controls manually with a small trick. 
  -  We add an `active` flag to the component, initialized to `true`. When we add a new hero,
  -  we toggle `active` false and then immediately back to true with a quick `setTimeout`.
  +  Relancer l'application, cliquer sur le bouton *New Hero*, et le formulaire s'efface. 
  +  Les barres gauche sont rouges, indiquant l'invalidité des propriétés `name` et `power`.
  +  C'est compréhensible puisque ce sont des champs obligatoires.
  +  Les messages d'erreurs sont masqués parce que le formulaire est inchangé; aucun changement n'a été fait.
  +  
  +  Entrez un nom et cliquez encore sur *New Hero*.
  +  Maintenant nous voyons un message d'erreur! Pourquoi? Nous ne voulons pas afficher de message tant que nous affichons un nouveau héros (vide).
  +  
  +  En inspectant l'élément, nous verrons que le champ *name* n'est plus inchangé.
  +  Le remplacement du héros *ne restaure pas l'état inchangé* du champ.
  +.l-sub-section
  +  :marked
  +    Après réflexion, nous réalisons qu'Angular ne peut pas distinguer
  +    le remplacement d'un héros et la suppression de la propriété `name` programmatiquement.
  +    Angular ne fait aucune hypothèse et laisse le champ dans son état actuel, l'état changé.
  +:marked
  +  Nous devons réinitialiser le formulaire manuellement grâce à une petite astuce.
  +  Nous ajoutons un identifiant `active` au composant, initialisé à `true`. Lorsque nous ajoutons un nouveau héros,
  +  nous basculons `active` à false puis nous le remettons immédiatement à true avec un `setTimeout`.
   +makeExample('forms/ts/app/hero-form.component.ts', 
     'new-hero', 
     'app/hero-form.component.ts (New Hero method - final)')(format=".")
   :marked
  -  Then we bind the form element to this `active` flag.
  +  Ensuite nous lions les éléments du formulaire à l'identifiant `active`.
   +makeExample('forms/ts/app/hero-form.component.html', 
     'form-active', 
     'app/hero-form.component.html (Form tag)')
   :marked
  -  With `NgIf` bound to the `active` flag, 
  -  clicking "New Hero" removes the form from the DOM and recreates it in a blink of an eye.
  -  The re-created form is in a pristine state. The error message is hidden.
  -.l-sub-section
  -  :marked
  -    This is a temporary workaround while we await a proper form reset feature.
  -:marked
  -  
  -.l-main-section
  -:marked
  -  ## Submit the form with **ngSubmit**
  -  The user should be able to submit this form after filling it in.
  -  The Submit button at the bottom of the form
  -  does nothing on its own but it will
  -  trigger a form submit because of its type (`type="submit"`).
  -
  -  A "form submit" is useless at the moment.
  -  To make it useful, we'll update the `<form>` tag with another Angular directive, `NgSubmit`,
  -  and bind it to the `HeroFormComponent.submit()` method with an  event binding
  +  Avec `NgIf` attaché à l'identifiant `active`,
  +  en cliquant sur "New Hero" nous supprimons le formulaire du DOM et e, créons un nouveau en un clin d'oeil.
  +  Le nouveau formulaire est dans un état inchangé. Le message d'erreur est masqué.
  +.l-sub-section
  +  :marked
  +    C'est une solution de contournement temporaire le temps d'avoir une fonctionnalité correct de remise à zéro d'un formulaire.
  +:marked
  +  
  +.l-main-section
  +:marked
  +  ## Soumettre le formulaire avec **ngSubmit**
  +  L'utilisateur doit pouvoir soumettre ce formulaire après l'avoir rempli.
  +  Le bouton de soumission en bas du formulaire
  +  ne fait rien pour l'instant mais il va
  +  déclencher une soumission de formulaire grâce à son type (`type="submit"`).
  +
  +  Une "soumission de formulaire" est inutile pour l'instant.
  +  Pour la rendre utile, nous allons mettre à jour la balise `<form>` avec une autre directive d'Angular , `NgSubmit`,
  +  et la lier à la méthode `HeroFormComponent.submit()` avec une liaison d'événement
   +makeExample('forms/ts/app/hero-form.component.html', 'ngSubmit')(format=".")
   
   :marked
  -  We slipped in something extra there at the end!  We defined a
  -  template reference variable, **`#heroForm`**, and initialized it with the value, "ngForm".
  -
  -  The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole.
  +  Nous ajoutons quelque chose de supplémentaire à la fin! Nous avons défini une
  +  référence, **`#heroForm`**, initialisé à "ngForm".
  +
  +  La variable `heroForm` est maintenant une référence à la directive `NgForm` que contient le formulaire dans son ensemble.
   <a id="ngForm"></a>
   .l-sub-section
     :marked
  -    ### The NgForm directive
  -    What `NgForm` directive? We didn't add an [NgForm](../api/common/index/NgForm-directive.html) directive!
  +    ### La directive NgForm
  +    Qu'est-ce que la directive `NgForm`? Nous n'avons pas ajouter une directive [NgForm](../api/common/index/NgForm-directive.html)!
       
  -    Angular did. Angular creates and attaches an `NgForm` directive to the `<form>` tag automatically.
  -
  -    The `NgForm` directive  supplements the `form` element with additional features.
  -    It holds the controls we created for the elements with `ngModel` directive and `name` attribute
  -    and monitors their properties including their validity.
  -    It also has its own `valid` property which is true only *if every contained
  -    control* is valid.
  +    Angular l'a fait. Angular crée et attache une directive `NgForm` à la balise `<form>` automatiquement.
  +
  +    La directive `NgForm` étend la balise `form` avec de nouvelles fonctionnalités.
  +    Elle contient les champs que nous avons créé pour les éléments avec la directive `ngModel` et l'attribut `name`
  +    et surveille leurs propriétés ainsi que leur validité.
  +    Elle a aussi sa propre propriété de validité qui est à true seulement *si chaque 
  +    champs* est valide.
       
   :marked
  -  Later in the template we bind the button's `disabled` property to the form's over-all validity via
  -  the `heroForm` variable. Here's that bit of markup:
  +  Plus bas dans le template, nous lions la propriété `disabled` du bouton à la référence de validité global
  +  `heroForm`. Voici le code:
   +makeExample('forms/ts/app/hero-form.component.html', 'submit-button')
   :marked
  -  Re-run the application. The form opens in a valid state and the button is enabled.
  -
  -  Now delete the *Name*. We violate the "name required" rule which
  -  is duly noted in our error message as before. And now the Submit button is also disabled.
  -
  -  Not impressed?  Think about it for a moment. What would we have to do to
  -  wire the button's enable/disabled state to the form's validity without Angular's help?
  -
  -  For us, it was as simple as
  -  1. Define a template reference variable on the (enhanced) form element
  -  2. Reference that variable in a button some 50 lines away.
  -
  -.l-main-section
  -:marked
  -  ## Toggle two form regions (extra credit)
  -  Submitting the form isn't terribly dramatic at the moment.
  -.l-sub-section
  -  :marked
  -    An unsurprising observation for a demo. To be honest,
  -    jazzing it up won't teach us anything new about forms.
  -    But this is an opportunity to exercise some of our newly won
  -    binding skills.
  -    If you're not interested, you can skip to the chapter's conclusion
  -    and not miss a thing.
  -:marked
  -  Let's do something more strikingly visual.
  -  Let's hide the data entry area and display something else.
  -
  -  Start by wrapping the form in a `<div>` and bind
  -  its `hidden` property to the `HeroFormComponent.submitted` property.
  +  Relancer l'application. Le formulaire s'affiche dans un état valide et le bouton est actif.
  +
  +  Maintenant supprimez le *Name*. Nous transgressons la règle de validité du "name" qui
  +  est dûment noté dans notre message d'erreur comme avant. Et maintenant le bouton de soumission n'est plus actif.
  +
  +  Pas impressionné? Pensez y un moment. Que devrions nous faire pour 
  +  câbler l'état actif/inactif d'un bouton à l'état d'un formulaire sans l'aide d'Angular?
  +
  +  Pour nous, c'était aussi simple que
  +  1. Définir une référence de template à l'élément formulaire (amélioré)
  +  2. Référencé cette variable à un bouton 50 lignes plus bas.
  +
  +.l-main-section
  +:marked
  +  ## Afficher/masquer les zones de formulaire (bonus)
  +  La soumission du formulaire n'est pas terriblement dramatique pour le moment.
  +.l-sub-section
  +  :marked
  +    Rien de surprenant pour la démo. Pour être honnête,
  +    jouer avec ne nous apprendra rien de nouveau sur les formulaires.
  +    Mais c'est une opportunité d'exercer certaines de nos nouvelles
  +    compétences de liaison.
  +    Si cela ne vous intéresse pas, you pouvez passer cette conclusion
  +    vous ne manquerez rien.
  +:marked
  +  Faisons quelque chose visuellement étonnant.
  +  Cachons les zones de saisie et affichons autre chose.
  +
  +  Commencez par encapsuler le formulaire dans un `<div>` et liez
  +  ça propriété `hidden` à la propriété `HeroFormComponent.submitted`.
   
   +makeExample('forms/ts/app/hero-form.component.html', 'edit-div', 'app/hero-form.component.html (excerpt)')(format=".")
   
   :marked
  -  The main form is visible from the start because the
  -  the `submitted` property is false until we submit the form,
  -  as this fragment from the `HeroFormComponent` reminds us:
  +  Le formulaire principal est visible depuis le début car la
  +  propriété `submitted` est à false tant que nous n'avons pas soumis le formulaire,
  +  comme ce morceau de code nous le rappelle:
   
   +makeExample('forms/ts/app/hero-form.component.ts', 'submitted')(format=".")
   
   :marked
  -  When we click the Submit button, the `submitted` flag becomes true and the form disappears
  -  as planned.
  -
  -  Now we need to show something else while the form is in the submitted state.
  -  Add the following block of HTML below the `<div>` wrapper we just wrote:
  +  Lorsque nous cliquons sur le bouton de soumission, l'identifiant `submitted` passe à true et le formulaire disparaît
  +  comme prévu.
  +
  +  Nous avons maintenant besoin d'afficher autre chose le temps que le formulaire est en cours de soumission.
  +  Ajouter le bloc HTML suivant en dessous du conteneur `<div>` que nous venons d'écrire:
   +makeExample('forms/ts/app/hero-form.component.html', 'submitted', 'app/hero-form.component.html (excerpt)')
   
   :marked
  -  There's our hero again, displayed read-only with interpolation bindings.
  -  This slug of HTML only appears while the component is in the submitted state.
  -
  -  We added an Edit button whose click event is bound to an expression
  -  that clears the `submitted` flag.
  -
  -  When we click it, this block disappears and the editable form reappears.
  -
  -  That's as much drama as we can muster for now.
  +  Voici notre héros de nouveau, affiché en lecture seule avec la liaison d'interpolation.
  +  Ce morceau de HTML s'affiche uniquement tant que le composant est en cours de soumission.
  +
  +  Nous avons ajouter un bouton Edit qui a son événement click lié à une expression
  +  qui remet à false l'identifiant `submitted`.
  +
  +  Lorsque nous cliquons dessus, ce bloque disparaît et le formulaire apparaît.
  +
  +  Voici tous ce que nous pouvons faire pour l'instant.
   
   .l-main-section
   :marked
     ## Conclusion
   
  -  The Angular 2 form discussed in this chapter takes advantage of the following framework features to provide support for data modification, validation and more:
  -
  -  - An Angular HTML form template.
  -  - A form component class with a `Component` decorator.
  -  - The `ngSubmit` directive for handling the form submission.
  -  - Template reference variables such as `#heroForm`, `#name`, `#alter-ego` and `#power`.
  -  - The `[(ngModel)]` syntax for two-way data binding, validation and change tracking. 
  -  - The reference variable’s `valid` property on input controls to check if a control is valid and show/hide error messages.
  -  - Controlling the submit button's enabled state by binding to `NgForm` validity.
  -  - Custom CSS classes that provide visual feedback to users about invalid controls.
  -
  -  Our final project folder structure should look like this:
  +  Les formulaires d'Angular 2 vus dans ce chapitre prend avantage des fonctionnalités du framework pour faciliter la modification des données, la validation et plus:
  +
  +  - Un template HTML de formulaire Angular.
  +  - Un composant de formulaire avec le décorateur `Component`.
  +  - La directive `ngSubmit` pour gérer la soumission du formulaire.
  +  - Des références de template comme `#heroForm`, `#name`, `#alter-ego` et `#power`.
  +  - La syntaxe `[(ngModel)]` pour la liaison bidirectionnelle, la validation et le suivi des modification.
  +  - La propriété `valid` de la référence de template des champs pour vérifier su un champ est valide et afficher/masquer des message d'erreurs.
  +  - Contrôler l'état du bouton de soumission en se liant à la validité de `NgForm`.
  +  - Des classes CSS personnalisés pour apporter un retour visuel sur les champs non valides.
  +
  +  Voici la structure final de notre projet :
   .filetree
     .file angular2-forms
     .children
  
positive.code:     .file tsconfig.json
      .file typings.json
  :marked
    Here’s the final version of the source:
  
  +makeTabs(
    `forms/ts/app/hero-form.component.ts,
  
negative.code: 
  .alert.is-important
    :marked
      Ce guide utilise la nouvelle API de formulaire. Pour utiliser cette API, vous devez ajouter quelques
      dépendances à votre fichier de démarrage (Voir la section Démarrage plus bas).
      
      L'ancienne API est déprécié, mais nous continuons à maintenir une version séparé du guide de
      la version déprécié de l'API de formulaires <a href='/docs/ts/latest/guide/forms-deprecated.html'>ici</a>.
  
  :marked
    Nous avons tous utilisé un formulaire pour s'identifier, soumettre une demande d'aide,
    passer une commande, réserver un vol, planifier une réunion ou effectuer d'innombrables autres tâches de saisie de données.
    Les formulaires sont les fondations de toutes applications métiers.
  
    Tout développeur web chevronné peut créer un formulaire HTML avec toutes les bonnes balises.
    Il est plus difficile de créer une expérience de saisie de données uniforme qui guide
    l'utilisateur de manière rapide et efficace à travers les différentes étapes du formulaire.
  
    *Ceci* requiert des compétence en design, pour être franc, c'est hors du contexte de ce chapitre.
  
    Dans un formulaire, il faut pouvoir gérer 
    **la liaison bidirectionnelle des données, le suivi des changements, la validation des champs et la gestion des erreurs**.
    ... nous allons traiter ces différents points tout au long de ce chapitre.
  
    Nous allons construire un formulaire simple à partir de zéro, pas à pas, durant lequel nous apprendrons
  
    - à construire un formulaire Angular en utilisant un composant et un modèle
  
    - la liaison bidirectionnelle des données avec la syntaxe de `[(ngModel)]` pour lire et écrire les valeurs des formulaires de saisie
  
    - l'utilisation de `ngModel` pour suivre les changements et la validité des valeurs dans un formulaire
  
    - l'ajout de classes CSS qui suivent l'état du formulaire pour fournir une bonne interaction avec l'utilisateur
  
    - à afficher des messages d'erreurs et à activer/désactiver le contrôle des champs du formulaire
  
    - partager des informations entre les champs avec les références de template
    
    [Exemple en ligne](/resources/live-examples/forms/ts/plnkr.html)
  
  .l-main-section
  :marked
     ## Démarrage
  
     Nous commençons par montrer comment démarrer l'application et y ajouter les dépendances nécessaires pour utiliser les formulaires.
  
     Pendant le démarrage, nous devons enregistrer le module de formulaire en appelant `provideForms()` et en retournant le résultat dans le tableau des dépendances.
  +makeExample('forms/ts/app/main.ts','','app/main.ts')   
  
  :marked
     L'ancienne API de formulaires est dépréciée. Au cours de cette transition Angular supporte les deux modules de formulaire.
  
     Pour nous rappeler que l'ancienne API est obsolète, Angular affiche un message d'alerte à la console.
     
     Puisque nous utilisons la nouvelle API, nous appelons `disableDeprecatedForms()` pour désactiver l'ancienne API de formulaire et le message d'alerte.
  
  .l-main-section
  :marked
    ## Les Formulaires à travers les Templates
  
    Beaucoup d'entre nous construirons des formulaires à partir des modèles dans Angular [Syntaxe de Template](./template-syntax.html) avec
    les directives spécifiques de formulaires et les techniques décrites dans ce chapitre.
  .l-sub-section
    :marked
      C'est la méthode que nous allons aborder dans ce chapitre. Cependant, il existe d'autres méthodes pour créer des formulaires.
  :marked
    Nous pouvons construire presque tous les formulaires dont nous avons besoin avec les modèles d'Angular &mdash; formulaire d'authentification, de contact ... à peu près tous les formulaires métiers.
    Nous pouvons disposer les éléments de contrôles intuitivement, lier ces éléments aux données, spécifier les règles de validations et afficher les messages d'erreurs,
    activer ou désactiver des champs spécifiques, déclencher un retour visuel à l'utilisateur, et bien plus.
  
    Ça sera assez facile parce qu'Angular va gérer la plupart des actions répétitives, ainsi que les tâches réutilisables
    qu'on se serai coltiner.
  
    Nous allons chercher à construire le modèle de formulaire suivant:
  
  figure.image-display
    img(src="/resources/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form")
  
  :marked
    Ici, à *Hero Employment Agency* nous utilisons ce formulaire pour conserver des informations personnelles sur les
    héros. Chaque héros a besoin d'un emploi. Il est de notre mission de proposer le bon emploi au bon héros!
  
    Deux des trois champs de ce formulaire sont obligatoires. Les champs obligatoires ont une barre verte sur la gauche pour les rendre faciles à repérer.
  
    Si nous supprimons le nom du héros, le formulaire affiche une erreur de validation qui attire le regard:
  
  figure.image-display
    img(src="/resources/images/devguide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required")
  
  :marked
    Notez que le bouton de soumission n'est pas actif et que la barre verte du champ obligatoire est passé au rouge.
  
  .l-sub-section
    p Nous allons personnaliser les couleurs et la position de la barre signalant un champ obligatoire avec du CSS standard.
  
  :marked
    Nous créerons le formulaire en suivant les petites étapes ci-dessous
  
    1. Créer la classe du modèle `Hero`
    1. Créer le composant qui contrôlera le formulaire
    1. Créer une vue avec la mise en page du formulaire initiale
    1. Lier les propriétés à chaque champ avec la syntaxe de liaison bidirectionnelle de `ngModel`
    1. Ajouter l'attribut **#name** pour chaque champ du formulaire
    1. Personnaliser le CSS pour fournir une meilleur interaction utilisateur
    1. Afficher et cacher les message d'erreurs
    1. Soumettre le formulaire avec **ngSubmit**
    1. Désactiver la soumission tant que le formulaire n'est pas valide
  
  :marked
    ## Initialisation
    Créer un nouveau projet (`angular2-forms`) et suivez les étapes du [QuickStart] (../ quickstart.html).
  
  include ../_quickstart_repo
  :marked
    ## Créer le modèle Hero
  
    Puisque l'utilisateur modifiera le formulaire, nous traquerons les changements et mettrons à jour une instance de Hero.
    Nous ne pouvons construire le formulaire avant de savoir ce qu'on a dans le modèle.
  
    Un modèle peut être vu simplement comme un conteneur de propriété, qui garde les informations importantes de l'application.
    Ceci décrit bien notre classe `Hero` avec ces trois champs obligatoire (`id`, `name`, `power`)
    et le champ optionnel (`alterEgo`).
  
    Créez un nouveau fichier `hero.ts` dans le dossier app et lui donner la définition de classe suivante:
  
  +makeExample('forms/ts/app/hero.ts', null, 'app/hero.ts')
  
  :marked
    c'est un modèle simple avec quelques exigences et aucun comportement. Parfait pour la démo.
  
    Le compilateur TypeScript génère un champs public pour chaque paramètre `public` du constructeur et
    assigne la valeur du paramètre à ce champ automatiquement à chaque nouvelle instance de Hero.
    
    Le `alterEgo` est optionnel et le constructeur nous autorise l'omission de ce dernier; notez le (?) dans `alterEgo?`.
  
    Nous pouvons créer un nouvel héros comme suit:
  code-example(format="").
    let myHero =  new Hero(42, 'SkyDog', 
                           'Fetch any object at any distance', 'Leslie Rollover');
  