21-2 Formulaire modal

Maintenant, construisons le formulaire dans la fenêtre de dialogue modale.

Premièrement, le composant de modal devra accepter un identifiant de projet, soit le projet pour lequel créer l'issue. Ajoutez une propriété @Input afin d'accepter ce paramètre en entrée.
src/app/features/issues/components/issue-creer-modal.ts
```
export class IssueCreerModal {
  @Input() projetId: number | null = null;
  
  constructor(public activeModal: NgbActiveModal) {
  }
}
```
Passez l'identifiant du projet en question lors de l'affichage du modal, à partir du composant de liste d'issues. Pour cela, on peut obtenir l'instance active de la fenêtre modale et lui assigner manuellement le projetId.
src/app/features/issues/components/issues-liste.ts
```
protected async ouvrirCreerIssueModal() {
  const modal = this.modalService.open(IssueCreerModal);
  modal.componentInstance.projetId = this.projetId;
}
```

Ensuite, de retour dans le composant modal, créez un FormGroup à l'aide du FormBuilder.

src/app/features/issues/components/issue-creer-modal.ts
export class IssueCreerModal {
  @Input() projetId: number | null = null;
  protected issueForm = new FormBuilder().group({

  });

  constructor(public activeModal: NgbActiveModal) {
  }
}

Définir la structure de données du formulaire à l'aide du FormBuilder.

src/app/features/issues/components/issue-creer-modal.ts
export class IssueCreerModal {
  @Input() projetId: number | null = null;
  protected issueForm = new FormBuilder().group({
    titre: ['', [Validators.required, Validators.minLength(3)]],
    contenu: ['', [Validators.required]]
  }, {
    updateOn: 'blur'
  });

  //...

info

On ne précise pas l'auteur pour l'instant puisque l'authentification n'est pas implémentée.

Ajouter les get pour les champs du formulaire

src/app/features/issues/components/issue-creer-modal.ts
//...

get titre() {
  return this.issueForm.get('titre');
}

get contenu() {
  return this.issueForm.get('contenu');
}

//...

Englobez modal-body et modal-footer d'une balise form, associée à une fonction soumettre()

src/app/features/issues/components/issue-creer-modal.ts
@Component({
  selector: 'app-issue-creer-modal',
  imports: [
    ReactiveFormsModule
  ],
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Ajouter une tâche</h4>
      <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss(false)"></button>
    </div>
    <form [formGroup]="issueForm" (ngSubmit)="soumettre()">
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Créer</button>
        <button type="button" class="btn btn-secondary" (click)="activeModal.close(false)">Annuler</button>
      </div>
    </form>
  `,
  styles: ``
})

src/app/features/issues/components/issue-creer-modal.ts
//...

protected async soumettre() {
  
}

//...

info

Comme le bouton submit du formulaire est dans le div modal-footer, on doit s'assurer que ce dernier fait partie de la balise <form>. Autrement, il ne déclenchera pas l'envoi du formulaire.

Complétez le reste du formulaire (les champs input et le HTML pour la validation). La documentation reliée à cet aspect a malheureusement été détruite dans un malencontreux incident. Cette étape a été vue préalablement et vous devriez être en mesure de compléter le formulaire en vous basant sur ce qui a été fait précédemment pour le projet.

À noter:

Contenu est un champ textarea puisque le contenu peut être sur plusieurs lignes!

Imgur