|
Publié le par Chloé MAHALIN

Angular 4

Ajouter un composant HTML Select à ma vue

Prérequis, structure d'un projet Angular.

Objectif

Notre objectif est de voir comment rajouter un select dans la vue avec Angular, que ça soit unitairement ou dans un formulaire.

Ajouter un composant select simple dans la vue

Créons un composant simple :

myComponent.html

<div>
    <select [(ngModel)]="selected">
        <option [ngValue]="''"> -- Choisir -- </option>
        <option [ngValue]="'FRANCE'">France</option>
        <option [ngValue]="'CANADA'">Canada</option>
        <option [ngValue]="'MAROC'">Maroc</option>
    </select>
    {{selected}}
</div>

myComponent.ts

import { Component } from '@angular/core';

@Component({
  selector: 'myComponent-tag',
  templateUrl: './myComponent.html',
  styleUrls: ['./myComponent.css']
})
export class MyComponent {

  selected: string;
}

Je vous épargne la rédaction du css, puisque le contenu sera vide.

Pour résumer ! Nous disposons dans la vue d'un select dont la valeur est liée à la variable 'selected' du model de mon composant.

Lorsqu'une sélection aura lieu, le contenu de ma variable sera mis à jour. Cela devrait se constater immédiatement puisque l'on affiche le contenu de la variable selected directement dans la vue à travers la ligne :

{{selected}}

Le mapping de la valeur se fait simplement depuis l'attribut ngModel, qui permet le double data binding model-vue.

Ajouter un composant select dans un formulaire

Techniquement, la vue ne va beaucoup différer du cas précédent, à part l'attribut de mapping, qui devient : formControlName.

myComponent.html

<div>
    <form [formGroup]="myForm">
        <select formControlName="country">
            <option [ngValue]="''"> -- Choisir -- </option>
            <option [ngValue]="'FRANCE'">France</option>
            <option [ngValue]="'CANADA'">Canada</option>
            <option [ngValue]="'MAROC'">Maroc</option>
        </select>
        {{myForm.value.country}}
    <form>
</div>

myComponent.ts


import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'myComponent-tag',
  templateUrl: './myComponent.html',
  styleUrls: ['./myComponent.css']
})
export class MyComponent {

  private formBuilder: FormBuilder;
  myForm: FormGroup;

  constructor(formBuilder: FormBuilder) {
    this.formBuilder = formBuilder;
    this.createForm();
  }

  private createForm(): any {
    this.myForm = this.formBuilder.group({
      country: ''
    });
  }

}