17-1 Base du formulaire de création

Commençons par le formulaire permettant de créer un nouveau projet. Nous avons déjà un composant appelé ProjetCreer que nous allons utiliser pour y insérer le formulaire.

Décrire la structure du formulaire à l'aide d'un `FormGroup`

La première étape est de préciser, au niveau du composant, le formulaire et ses champs. C'est ce qui permettra de lier le gabarit (HTML) à la logique.

FormGroup est un objet Angular permettant de décrire un formulaire, de contenir les valeurs du formulaire et de faire le lien entre le code de la classe et le gabarit.

FormGroup contient plusieurs FormControl qui représentent des champs (ex.: input) du formulaire;

Dans la page de création de projet, ajoutez une variable projetForm qui instancie une classe FormGroup
src/app/features/projets/pages/projet-creer.ts
```
export class ProjetCreer {
  projetForm = new FormGroup({

  });
}
```
info
FormGroup Définis un formulaire et vous devrez ajouter l'importation!
Ajoutons deux FormControl: un pour le nom et un pour la description du projet.
src/app/pages/projets/projet-creer.page.ts
```
export class ProjetCreer {
  projetForm = new FormGroup({
    nom: new FormControl(''),
    description: new FormControl(''),
  });
}
```
info
FormControl Définis un champ de formulaire.
La valeur passée en argument est la valeur par défaut du champ. Ici, on veut des champs vides.

Créer le gabarit HTML du formulaire

Dans la page de création, ajoutons une balise form qui contiendra le formulaire et les différents champs (nom et description pour commencer).
src/app/features/projets/pages/projet-creer.ts
```
@Component({
  selector: 'app-projet-creer',
  imports: [],
  template: `
    <div class="row">
      <div class="col-lg-6 offset-lg-3">
        <h1>Créer un nouveau projet</h1>

        <form>

        </form>
      </div>
    </div>
  `,
  styles: ``
})
```
info
J'en ai profité pour créer un gabarit dans lequel le contenu sera centré dans l'écran, avec une largeur de 6 colonnes.
- <div class="row"> ajoute une rangée bootstrap
- <div class="col-lg-6 offset-lg-3"> défini une colonne de 6 de large, décalée de 3 colonnes (donc centré dans la page)
- form étant la balise qui contiendra le formulaire et les champs
Comme le formulaire est petit, s'il prenait toute la largeur de la page ce serait étrange, c'est pourquoi on le limite en largeur ici.

Ajouter un input pour le nom

src/app/features/projets/pages/projet-creer.ts
@Component({
  selector: 'app-projet-creer',
  imports: [],
  template: `
    <div class="row">
      <div class="col-lg-6 offset-lg-3">
        <h1>Créer un nouveau projet</h1>

        <form>
          <div class="form-floating mb-3">
            <input type="text" class="form-control" id="projetNom" placeholder="Nom">
            <label for="projetNom">Nom</label>
          </div>
        </form>
      </div>
    </div>
  `,
  styles: ``
})

info

Un input et un label sont simplement ajoutés dans un div avec la classe form-floating afin de profiter des libellés flottants de Bootstrap.

http://localhost:4200/projets/creer

Ajouter un textarea pour la description et un bouton submit pour l'envoi du formulaire

src/app/pages/projets/projet-creer.page.ts
@Component({
  selector: 'app-projet-creer',
  imports: [],
  template: `
    <div class="row">
      <div class="col-lg-6 offset-lg-3">
        <h1>Créer un nouveau projet</h1>

        <form>
          <div class="form-floating mb-3">
            <input type="text" class="form-control" id="projetNom" placeholder="Nom">
            <label for="projetNom">Nom</label>
          </div>
          
          <div class="form-floating mb-3">
            <textarea class="form-control" placeholder="Description" id="projetDescription"></textarea>
            <label for="projetDescription">Description</label>
          </div>

          <button type="submit" class="btn btn-primary">Soumettre</button>
        </form>
      </div>
    </div>
  `,
  styles: ``
})

Vous devriez maintenant avoir un visuel de formulaire ressemblant à ceci:

http://localhost:4200

Décrire la structure du formulaire à l'aide d'un FormGroup​

Créer le gabarit HTML du formulaire​

Décrire la structure du formulaire à l'aide d'un `FormGroup`

Créer le gabarit HTML du formulaire