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: 
  .alert.is-important
    :marked
      This guide is using the new forms API. To use this API, you must opt in by adding special
      providers to your bootstrap file (see the Bootstrap seection below).
      
      The old forms API is deprecated, but we still maintain a separate version of the guide using
      the deprecated forms API <a href='/docs/ts/latest/guide/forms-deprecated.html'>here</a>.
  
  :marked
    We’ve all used a form to login, submit a help request, place an order, book a flight,
    schedule a meeting and perform countless other data entry tasks.
    Forms are the mainstay of business applications.
  
    Any seasoned web developer can slap together an HTML form with all the right tags.
    It's more challenging to create a cohesive data entry experience that guides the
    user efficiently and effectively through the workflow behind the form.
  
    *That* takes design skills that are, to be frank, well out of scope for this chapter.
  
    It also takes framework support for
    **two-way data binding, change tracking, validation, and error handling**
    ... which we shall cover in this chapter on Angular forms.
  
    We will build a simple form from scratch, one step at a time. Along the way we'll learn
  
    - to build an Angular form with a component and template
  
    - two-way data binding with `[(ngModel)]` syntax for reading and writing values to input controls
  
    - using `ngModel` in combination with a form lets us track the change state and validity of form controls
  
    - special CSS classes that follow the state of the controls and can be used to provide strong visual feedback
  
    - displaying validation errors to users and enable/disable form controls
  
    - sharing information among controls with template reference variables
    
    [Live Example](/resources/live-examples/forms/ts/plnkr.html)
  
  .l-main-section
  :marked
     ## Bootstrap
  
     We start by showing how to bootstrap the application and add the necessary dependencies to use forms.
  
     During bootstrap we have to register the new forms module by calling `provideForms()` and pass the result to the provider array. 
  +makeExample('forms/ts/app/main.ts','','app/main.ts')   
  
  :marked
     The old forms API is going through a deprecation phase. During this transition Angular is supporting both form modules. 
  
     To remind us that the old API is deprecated, Angular will print a warning message to the console. 
     
     Since we are converting to the new API, and no longer need the old API, we call `disableDeprecatedForms()` to disable the old form functionality and the warning message. 
  
  .l-main-section
  :marked
    ## Template-Driven Forms
  
    Many of us will build forms by writing templates in the Angular [template syntax](./template-syntax.html) with
    the form-specific directives and techniques described in this chapter.
  .l-sub-section
    :marked
      That's not the only way to create a form but it's the way we'll cover in this chapter.
  :marked
    We can build almost any form we need with an Angular template &mdash; login forms, contact forms ... pretty much any business forms.
    We can lay out the controls creatively, bind them to data, specify validation rules and display validation errors,
    conditionally enable or disable specific controls, trigger built-in visual feedback, and much more.
  
    It will be pretty easy because Angular handles many of the repetitive, boiler plate tasks we'd
    otherwise wrestle with ourselves.
  
    We'll discuss and learn to build the following template-driven form:
  
  figure.image-display
    img(src="/resources/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form")
  
  :marked
    Here at the *Hero Employment Agency* we use this form to maintain personal information about the
    heroes in our stable. Every hero needs a job. It's our company mission to match the right hero with the right crisis!
  
    Two of the three fields on this form are required. Required fields have a green bar on the left to make them easy to spot.
  
    If we delete the hero name, the form displays a validation error in an attention grabbing style:
  
  figure.image-display
    img(src="/resources/images/devguide/forms/hero-form-2.png" width="400px" alt="Invalid, Name Required")
  
  :marked
    Note that the submit button is disabled and the "required" bar to the left of the input control changed from green to red.
  
  .l-sub-section
    p We'll customize the colors and location of the "required" bar with standard CSS.
  
  :marked
    We will build this form in the following sequence of small steps
  
    1. Create the `Hero` model class
    1. Create the component that controls the form
    1. Create a template with the initial form layout
    1. Bind data properties to each form input control with the `ngModel` two-way data binding syntax
    1. Add the **#name** attribute to each form input control
    1. Add custom CSS to provide visual feedback
    1. Show and hide validation error messages
    1. Handle form submission with **ngSubmit**
    1. Disable the form’s submit button until the form is valid
  
  :marked
    ## Setup
    Create a new project folder (`angular2-forms`) and follow the steps in the [QuickStart](../quickstart.html).
  
  include ../_quickstart_repo
  :marked
    ## Create the Hero Model Class
  
    As users enter form data, we capture their changes and update an instance of a model.
    We can't layout the form until we know what the model looks like.
  
    A model can be as simple as a "property bag" that holds facts about a thing of application importance.
    That describes well our `Hero` class with its three required fields (`id`, `name`, `power`)
    and one optional field (`alterEgo`).
  
    Create a new file in the app folder called `hero.ts` and give it the following class definition:
  
  +makeExample('forms/ts/app/hero.ts', null, 'app/hero.ts')
  
  :marked
    It's an anemic model with few requirements and no behavior. Perfect for our demo.
  
    The TypeScript compiler generates a public field for each `public` constructor parameter and
    assigns the parameter’s value to that field automatically when we create new heroes.
    
    The `alterEgo` is optional and the constructor lets us omit it; note the (?) in `alterEgo?`.
  
    We can create a new hero like this:
  code-example(format="").
    let myHero =  new Hero(42, 'SkyDog', 
                           'Fetch any object at any distance', 'Leslie Rollover');
  
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)')
  