|
Publié le par Chloé MAHALIN

Angular 4

Ajouter un composant HTML Input de type text à ma vue

Prérequis, structure d'un projet Angular.

Objectif

Notre objectif est de voir comment rajouter un input de type texte 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>
    <input type="text" maxlength="20" placeholder="Type your text here" [(ngModel)]="text" />
    {{ text }}
</div>

myComponent.ts

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

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

  text: string;
}

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

Pour résumer ! Nous disposons dans la vue d'un input de type texte dont la valeur est liée à la variable 'text' du model de mon composant. Lorsqu'une lettre sera ajoutée à mon input, le contenu de ma variable sera mis à jour. Cela devrait se constater immédiatement puisque l'on affiche le contenu de la variable 'text' directement dans la vue à travers la ligne :

{{ text }}

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

Ajouter un composant input 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">
        <input type="text" maxlength="20" placeholder="Type your text here" formControlName="text" />
        {{ myForm.value.text }}
    <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({
      text: ''
    });
  }

}