Informatique
Publié le 08/19/2017, rédigé par Chloé MAHALIN

Angular 4

Ajouter un composant HTML Input de type text à ma vue

Prérequis
- [structure d'un projet Angular](/university/frameworks/angular/002_structure_of_an_angular_component).

Objectif

Notre objectif est de voir comment rajouter un input de type texte dans la vue avec Angular

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

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 mapping de la valeur se fait simplement depuis l'attribut ngModel

Ajouter un composant input dans un formulaire

Techniquement

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: ''
    });
  }

}

Sélection d'articles :

ITAMETIS

Bienvenue sur l'université d'ITAMETIS où ses membres s'expriment librement sur les sujets qui leur plaisent. C'est un lieu de partage et d'échanges afin de fournir à tous, une base de connaissances accessible de manière libre et gratuite.

Qui nous sommes

Politique de Confidentialité