anchor.diff:      .file tsconfig.json
       .file typings.json
   :marked
  -  Here’s the final version of the source:
  +  Ici la version finale des sources:
   
   +makeTabs(
     `forms/ts/app/hero-form.component.ts,
  
positive.code:   '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`.
  +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.
  +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
  +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.
  <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!
      
      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.
      
  :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:
  +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.
  
  +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:
  
  +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:
  +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.
  
  .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:
  .filetree
    .file angular2-forms
    .children
  
negative.code: 
  .l-main-section
  :marked
    ## Créer le composant du formulaire
  
    Un formulaire Angular se compose de deux parties: un template HTML et un Composant qui permet de gérer les données et les interactions utilisateurs.
  
    Nous commençons avec le composant parce qu'il décrit, en bref, ce qu'on peut faire dans l'édition d'un Hero.
  
    Créez un nouveau fichier appelé `hero-form.component.ts` et définissez le comme suit:
  
  +makeExample('forms/ts/app/hero-form.component.ts', 'first', 'app/hero-form.component.ts')
  
  :marked
    Il n'y a rien de spécial sur ce composant, pas de spécificité lié au formulaire, rien qui le distingue des composants précédemment écrit.
  
    La compréhension de ce composant nécessite seulement deux concepts d'Angular 2 que nous avons appris précédemment
  
    1. On import le décorateur `Component` de la librairie d'Angular comme d'habitude.
  
    1. Le décorateur `@Component` de "hero-form" veut dire que nous pourrons réutiliser le formulaire avec tag `<hero-form>`.
  
    1. La propriété `templateUrl` correspond au fichier de template HTML appelé `hero-form.component.html`.
  
    1. Nous définissons des données fictives pour `model` and `powers`.
    Plus tard, nous pourrons injecter un service de données pour récupérer et sauvegarder de vrai données
    ou peut-être exposer ces propriétés comme [inputs and outputs](./template-syntax.html#inputs-outputs) pour les lier à un composant parant
    Rien de tous ça n'affecte notre formulaire.
  
    1. Nous avons pensé utile d'avoir une propriété `diagnostic` qui retourne une représentation JSON de notre modèle.
    Cela permettra de vérifier ce que nous faisons durant notre développement; Nous avons laissé une note pour le nettoyer plus tard.
  
    Pourquoi n'écrivons pas le template en mode inline directement dans le composant comme nous le faisons souvent
    ailleurs dans le Guide du Développeur ?
  
    Il n'y a pas de “bonnes” réponse pour toutes les questions ? Nous aimons les templates en mode inline quand il sont court.
    La plupart de template de formulaire ne seront pas court. Les fichiers TypeScript et JavaScript ne sont généralement pas le bonne place pour
    écrire (ou lire) du code HTML.
    Il est aussi préférable d'avoir de fichier court et facile à lire comme celui ci.
  
    Nous avons fait le bon choix d'avoir mis le template html ailleurs.
    Nous allons écrire ce template dans un instant. Avant, nous allons retourner une étape en arrière
    et revoir `app.component.ts` pour utiliser notre nouveau `HeroFormComponent`.
  
  .l-main-section
  :marked
    ## Révision de *app.component.ts*
  
    `app.component.ts` est le composant racine de l'application. Il utilisera notre nouveau `HeroFormComponent`.
  
    Remplacer le contenu de la version du "QuickStart" par le code ci-dessous:
  +makeExample('forms/ts/app/app.component.ts', null, 'app/app.component.ts')
  
  :marked
  .l-sub-section
    :marked
      Il y a seulement trois changements:
  
      1. Nous importons le nouveau `HeroFormComponent`.
  
      1. Le `template` contient juste la nouvelle balise identifiée par la propriété `selector` du composant.
  
      1. Le tableau `directives` dit à Angular que notre template dépends de `HeroFormComponent`
      qui est lui même une Directive (puisque tous est Composant).
  
  .l-main-section
  :marked
    ## Créer un template initial de formulaire
  
    Créer un nouveau fichier appelé `hero-form.component.html` et le définir comme ceci:
  
  +makeExample('forms/ts/app/hero-form.component.html', 'start', 'app/hero-form.component.html')
  
  :marked
    Ceci est du HTML5 habituel. Nous affichons deux des champ de la classe `Hero`, `name` et `alterEgo`.
  
    Le champ *Name* a l'attribut HTML5 `required`;
    Le champ *Alter Ego* ne l'a pas, puisqu'il est optionnel.
  
    Nous avons un bouton *Submit* en bas avec quelques classes dessus.
  
    **Nous n'utilisons pas encore Angular**. Il n'y a pas de liaison. Ni de directives. Juste de l'affichage.
  
    Les classes `container`,`form-group`, `form-control`, et `btn`
    viennent de [Twitter Bootstrap](http://getbootstrap.com/css/). Juste du style.
    Nous utilisons Bootstrap pour arranger notre formulaire.
    Qu'est qu'un formulaire sans style !?
  
  .callout.is-important
    header Les Formulaires D'Angular N'Ont Pas Besoin De Librairies
    :marked
      Angular n'utilise pas les classes `container`, `form-group`, `form-control`, et `btn` ou
      les styles de librairies externe. Les applications Angular peuvent utiliser n'importe quelles librairies CSS
      ... ou aucune.
  
  :marked
    Ajoutons la feuille de style.
  
  ol
    li Ouvrir un terminal sur le dossier racine de l'application et entrer la commande:
      code-example(language="html" escape="html").
        npm install bootstrap --save
    li Ouvrir <code>index.html</code> et importer la feuille de style de bootstrap dans le <code>&lt;head></code>.
        +makeExample('forms/ts/index.html', 'bootstrap')(format=".")
  :marked
  .l-main-section
  :marked
    ## Ajouter les pouvoirs avec ***ngFor**
    Notre héros peut choisir un super pouvoir depuis une liste static des pouvoirs approuvé par l'agence.
    Nous maintenons cette liste dans `HeroFormComponent`.
  
    Nous allons ajouter un `select` dans notre
    formulaire et lier les options du `select` à la liste des `powers` en utilisant `ngFor`,
    une technique que nous avons déjà vu dans le chapitre [Affichage des Données](./displaying-data.html).
  
    Ajouter le code HTML suivant *juste en dessous* le groupe *Alter Ego*.
  +makeExample('forms/ts/app/hero-form.component.html', 'powers', 'app/hero-form.component.html (excerpt)')(format=".")
  
  :marked
    Nous répétons les balises `<options>` pour chaque pouvoir de la liste des Pouvoirs.
    La variable `p` correspond au pouvoir de chaque itération;
    nous affichons son nom en utilisant la syntaxe d'interpolation avec les doubles accolades.
  
  <a id="ngModel"></a>
  .l-main-section
  :marked
    ## Binding bidirectionnel avec **ngModel**
    Lancer la démo a cette étape sera décevant.
  
  figure.image-display
    img(src="/resources/images/devguide/forms/hero-form-3.png" width="400px" alt="Early form with no binding")
  :marked
    Nous ne voyons pas de données car le `Hero` n'a pas encore été lié.
    Nous avons appris à faire ça lors des chapitres précédents.
    [Affichage des Données](./displaying-data.html) nous a appris à lier des données.
    [User Input](./user-input.html) nous a montré à écouter des événements DOM avec
    le Binding d'Événement et à mettre à jour la propriété d'un composant avec la valeur affiché.
  
    Nous avons besoin maintenant d'afficher, d'écouter et d'extraire les données en même temps.
  
    Nous pouvons réutiliser ces techniques pour notre formulaire.
    Nous allons plutôt introduire quelque chose de nouveau, la syntaxe `[(ngModel)]`, elle
    lie notre formulaire au model très simplement.
  
    Modifier le champs `<input>` pour le "Nom" comme ci-dessous
  
  +makeExample('forms/ts/app/hero-form.component.html', 'ngModel-1','app/hero-form.component.html (excerpt)')(format=".")
  
  .l-sub-section
    :marked
      Nous avons ajouté une interpolation de debug après le champ input,
      nous pouvons donc debugger plus facilement.
      Nous nous laissons une note pour la supprimer plus tard.
      
  
  :marked
    Concentrons nous sur la syntaxe de liaison: `[(ngModel)]="..."`.
  
    Si nous lançons l'application maintenant et commençons à modifier le champ *Nom*,
    nous verrons nos modifications apparaître à côté
    au niveau du texte interpolé.
    Cela pourrai donner quelque chose comme ça.
  figure.image-display
    img(src="/resources/images/devguide/forms/ng-model-in-action.png" width="400px" alt="ngModel in action")
  :marked
    Nous pouvons voir clairement le flux aller du champ vers le model et revenir.
    **C'est la liaison bidirectionnelle!**
  
    Notez que nous avons également ajouter un attribut `name` à notre balise `<input>`. C'est obligatoire lorsque nous utilisons `[(ngModel)]` avec un formulaire, nous pouvons donc facilement faire référence à la valeur dans le formulaire global et sa validité.
  
    Ajoutons les champs *Alter Ego* et *Hero Power* de la même façon.
    
    Nous supprimons la précédents interpolation de debug
    et ajoutons la propriété `diagnostic` en haut du formulaire.
    Nous pourrons donc confirmer que la liaison bidirectionnelle fonctionne *pour le modèle Hero*.
  
    Notre formulaire devrais être assemblé à trois `[(ngModel)]`,
    comme ceci :
  
  +makeExample('forms/ts/app/hero-form.component.html', 'ngModel-2', 'app/hero-form.component.html (excerpt)')
  
  :marked
    Si nous lançon l'application et modifions chaque propriété du modèle Hero, le formulaire ressemblera à ça:
  figure.image-display
    img(src="/resources/images/devguide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in super action")
  :marked
    L'interpolation `diagnostic` en haut du formulaire
    confirme que tous les changements sont reporter au modèle.
  
    **Supprimer** l'interpolation `{{diagnostic}}` du haut puisque qu'on a confirmé la liaison bidirectionnelle.
  
  .l-sub-section
    :marked
      ### Fonctionnement interne de [(ngModel)]
      *Cette section sur [(ngModel)] est optionnelle. Pas intéressé(e)? Sautez cette section!*
      
      La syntaxe de liaison, <span style="font-family:courier"><b>[()]</b></span>, peut nous donner une idée sur ce qui ce passe.
  
      Dans un Binding de Propriété, une valeur se déplace du modèle à une propriété cible sur l'écran.
      Nous identifions cette propriété cible en entourant son nom entre crochets, <span style="font-family:courier"><b>[]</b></span>.
      C'est la liaison unidirectionnelle **du modèle à la vue**.
  
      Dans le Binding d'Événement, nous déplaçons la valeur de la propriété cible sur l'écran vers le modèle.
      Nous identifions cette propriété cible en entourant son nom entre parenthèses, <span style="font-family:courier"><b>()</b></span>.
      C'est la liaison unidirectionnelle dans le sens opposé **de la vue au modèle**.
  
      C'est donc normal que Angular choisi de combiner les ponctuations comme ceci <span style="font-family:courier"><b>[()]</b></span>
      pour faire une liaison bidirectionnelle et **déplacer la donnée dans les deux sens**.
  
      En fait, nous pouvons séparer la liaison de `Ng model` en deux modes distinct
      comme décrit ci-dessous avec la liaison du `<input>` "Name":
    +makeExample('forms/ts/app/hero-form.component.html', 'ngModel-3','app/hero-form.component.html (excerpt)')(format=".")
  
    :marked
      <br>Le Binding de Propriété devrait être familier. Le Binding d'Événement peut paraître étrange.
  
      Le `ngModelChange` n'est pas un événement de l'élément `input`.
      C'est en fait une propriété d'événement de la directive `NgModel`.
      Quand Angular voit une cible de liaison sous la forme <span style="font-family:courier">[(x)]</span>,
      Il s'attend à ce que la directive `x` ai une propriété d'entrée `x` et une propriété de sortie `xChange`.
  
      L'autre singularité est l'expression, `model.name = $event`.
      Nous avons l'habitude de voir un objet `$event` provenant d'un événement DOM.
      Le propriété `ngModelChange` ne produit pas d'événement DOM; c'est une propriété d'`EventEmitter` d'Angular
      qui retourne la valeur d'entrée quand il se déclenche &mdash; Ce qui est précisément ce que
      nous devrons assigner à la propriété `name` du model.
  
      Bon à savoir, mais est-ce pratique? La plupart du temps, nous préférerons utiliser `[(ngModel)]`.
      Nous pourrons séparer la liaison bidirectionnelle si nous avons des choses spéciales à faire dans
      la gestion des événements tel que du debounce ou pour limiter le nombre d'événement mettant à jour le modèle.
  
      Vous pouvez en apprendre plus sur `NgModel` et sur d'autres syntaxe de liaison dans le 
      chapitre [Syntaxe de Template](./template-syntax.html).
  
  .l-main-section
  :marked
    ## Traquer les changements et la validité avec **ngModel**
  
    Faire un formulaire ne se résume pas par faire la liaison des données. Nous voulons aussi savoir l'état des champs du formulaire
  
    L'utilisation `ngModel` dans un formulaire nous offre plus que juste la liaison bidirectionnelle. Il est aussi possible de savoir quand un utilisateur touche un champ, si une valeur a changé, ou si une valeur est devenu invalide.
  
    `ngModel` ne se contente pas de suivre l'état d'un valeur; Il met à jour le champ avec une spéciale classe CSS d'Angular.
    Nous pouvons utilise ces noms de classes pour changer le style des 
    champs et afficher ou supprimer des messages.
  
    Nous allons explorer ces aspects bientôt. Maintenant
    faisons en sorte que nous avons bien `ngModel` et le nom de l'attribut correspondant dans chaque champs du formulaire,
    commençons par le champ *Name*.
  +makeExample('forms/ts/app/hero-form.component.html', 'ngModelName-1', 'app/hero-form.component.html (excerpt)')(format=".")
  :marked
    Nous initialisons l'attribut `name` à "name" ce qui est logique pour notre application. N'importe quelle valeur unique fera l'affaire.
  
  .l-sub-section
    :marked
      Intérieurement Angular crée des `FormControls` et les enregistrent avec une directive `NgForm` que Angular attache à la balise `<form>`. Chaque `FormControl` est enregistré sous le nom que nous avons assigné à l'attribut `name`.
      Nous parlerons de `NgForm` [plus loin dans chapitre](#ngForm).
  
  .l-main-section
  :marked
    ## Ajouter du CSS Personnalisé pour un Retour Visuel
  
    La directive *NgModel* ne traque pas seulement l'état. 
    Il met à jour les champs du formulaire avec trois classes qui représente l'état.
    
  table
    tr
      th État
      th Classe si vrai
      th Classe si faux
    tr
      td Le champ a été sélectionné
      td <code>ng-touched</code>
      td <code>ng-untouched</code>
    tr
      td La valeur du champ a changé
      td <code>ng-dirty</code>
      td <code>ng-pristine</code>
    tr
      td La valeur du champ est valide
      td <code>ng-valid</code>
      td <code>ng-invalid</code>
  :marked
    Ajoutons une [référence de template](./template-syntax.html#ref-vars) temporaire appelé **spy**
    à la balise `<input>` "Name" et utilisons le spy pour afficher ces classes.
  
  +makeExample('forms/ts/app/hero-form.component.html', 'ngModelName-2','app/hero-form.component.html (excerpt)')(format=".")
  
  :marked
    Maintenant lancez l'application et sélectionnez le champ *Name*.
    Suivre *précisément* ces quatre étapes
  
    1. Regardez le champ sans le toucher
    1. Sélectionnez puis désélectionnez le champ
    1. Ajoutez des slaches à la fin du nom
    1. Supprimez le nom
  
    Ci dessous, les actions et les effets sur les classes:
  figure.image-display
    img(src="/resources/images/devguide/forms/control-state-transitions-anim.gif"  alt="Control State Transition")
  :marked
    Nous devrons voir les quatre ensemble de noms de classes et leur transitions:
  figure.image-display
    img(src="/resources/images/devguide/forms/ng-control-class-changes.png" width="400px" alt="Control State Transitions")
  
  :marked
    La pair (`ng-valid` | `ng-invalid`) est la plus intéressante pour nous. Nous voulons afficher
    un retour visuel lorsque la donnée est invalide et également souligner les champs obligatoires.
  
    Nous pouvons faire les deux en même temps avec la barre coloré à gauche du champ:
  
  figure.image-display
    img(src="/resources/images/devguide/forms/validity-required-indicator.png" width="400px" alt="Invalid Form")
  
  :marked
    Pour afficher ces retours visuels, nous ajoutons deux styles dans un nouveau fichier `forms.css`
    que nous ajoutons à l'`index.html`.
  
  +makeExample('forms/ts/forms.css',null,'forms.css')(format=".")
  :marked
    Ces styles ciblent les deux classes de validité Angular et l'attribut HTML5 "required".
  
    Nous mettons à jour le `<head>` du `index.html` pour inclure la feuille de style.
  +makeExample('forms/ts/index.html', 'styles', 'index.html (excerpt)')(format=".")
  :marked
    ## Afficher et Masquer les Messages d'Erreurs
  
    Nous pouvons faire mieux.
  
    Le champ "Name" est obligatoire. Vider ce champ reviens à afficher la barre rouge. Ceci dit que *quelque chose* ne va pas mais nous
    ne savons pas *quoi* ou que faire de cette erreur.
    Nous pouvons tirer parti de la classe `ng-invalid` pour afficher un message d'erreur.
  
    Voici comment nous afficherons le message su l'utilisateur vide le champ nom:
  figure.image-display
    img(src="/resources/images/devguide/forms/name-required-error.png" width="400px" alt="Name required")
  
  :marked
    Pour réaliser ceci, nous allons étendre la balise `<input>` avec
    1. une [référence de template](./template-syntax.html#ref-vars)
    1. Le message "*is required*" proche du `<div>` sera affiché uniquement si le champ est invalide.
  
    Voici comment on fait pou le champ *name*:
  +makeExample('forms/ts/app/hero-form.component.html', 
    'name-with-error-msg', 
    'app/hero-form.component.html (excerpt)')(format=".")
  :marked
    Nous avons besoin d'une référence de modèle pour accéder au champ depuis le template.
    Ici, nous avons créé une variable `name` initialisé à la valeur "ngModel".
  .l-sub-section
    :marked
      Pourquoi "ngModel"? 
      Une propriété de directive [exportAs](../api/core/index/DirectiveMetadata-class.html#!#exportAs-anchor)
      dit à Angular comment faire le lien entre la référence et la directive
      Nous initialisons `name` à `ngModel` parce que  la propriété `exportAs` de la directive `ngModel` se trouve être "ngModel".
  
      Maintenant nous pouvons contrôler l'affichage du message d'erreur "name" en liant la propriété du champ `name` à la propriété `hidden` de l'élément `<div>` du message.
  +makeExample('forms/ts/app/hero-form.component.html', 
    'hidden-error-msg', 
    'app/hero-form.component.html (excerpt)')
  :marked
    Dans cette exemple, nous masquons le message quand le champ est valide ou inchangé;
    Un champ est inchangé si l'utilisateur n'a pas changé sa valeur depuis que le formulaire a été affiché.
    
    Cette expérience utilisateur est le choix du développeur. D'autres personnes voudrons voir les messages tout le temps. 
    Si nous ignorons l'état `pristine`, nous masquerons le message seulement quand le champ est valide.
    Si nous arrivons sur le formulaire avec un Hero vide ou invalide,
    nous verrons directement les messages d'erreurs.
     
    Certaines personnes trouverons ce comportement déconcertant. Ils voudrons voir le message seulement quand l'utilisateur fait de mauvais changement.
    En masquant le message tant que le champ est "inchangé", nous atteignons cette objectif.
    Nous verrons l'importance de ce choix lorsque nous [ajouterons un nouveau Hero](#new-hero) au formulaire.
  
    L'*Alter Ego* du Hero est optionnel nous pouvons donc le laisser tel quel.
  
    La sélection du *Power* du Hero est obligatoire.
    Nous pouvons ajouter la même gestion d'erreur au `<select>` si nous voulons
    mais ce n'est pas une obligation puisque la contrainte de sélection du
    pouvoir est déjà valide.
    
  <a id="new-hero"></a>
  <a id="reset"></a>  
  .l-main-section
  :marked
    ## Ajouter un héros et réinitialiser le formulaire 
    Nous voulons ajouter un nouveau héros dans ce formulaire. 
    Nous ajoutons un bouton "New Hero" en bas du formulaire et lions l'événement click du bouton à une méthode du composant.
  +makeExample('forms/ts/app/hero-form.component.html', 
    'new-hero-button', 
    'app/hero-form.component.html (New Hero button)')
  