Les formulaires en Angular2

30 Juil Les formulaires en Angular2

La première étape est de créer un nouveau projet en utilisant Angular-cli, si vous ne connaissez pas veuillez voir ce tutoriel avant de compléter la suite.

Les lignes d’installation du nouveau projet

ng new projet
cd projet
ng serve

Ensuite, naviguez sur cette url http://localhost:4200/

Etape 1 :

On génère en première étape notre nouveau component

// on nomme notre nouveau component Contact

ng g component Contact

NB : Actuellement, Angular-cli ne prend pas en charge une option pour supprimer le component, vous devez le faire manuellement.

// Supprimez les références d'importation pour chaque component de app.module

// Supprimez les dossiers des components.

Etape 2 :

On génère notre Model Class Contact, dont on va créer nos variables qu’on va les utiliser plus tard.

ng g class Contact\Contact

Et on initialise nos variables :

export class Contact {
	constructor(
	    public name: string,
	    public email: string,
	    public sujet?: string, // ?: Champs facultatif
	) {  }
}

Etape 3 :

La création du notre formulaire en HTML dans contact.component.html en introduisant des atributs d’Angular

<div  [hidden]="submitted">
	Récapitulatif : {{diagnostic}}
	<div class="container">
		<h1>Formulaire de contact</h1>
		<form *ngIf="active" (ngSubmit)="onSubmit()" #Contact="ngForm">
			<div class="form-group">
				<label for="rollNo">Nom et prénom</label> 
				<input type="text"
					class="form-control" id="name"
					required
	                [(ngModel)]="model.name" name="name"
					#name="ngModel">
				<div [hidden]="name.valid || name.pristine" class="alert alert-danger">Champs obligatoire.</div>
			</div>
			<div class="form-group">
				<label for="name">Email</label> 
				<input type="text"
					class="form-control" id="email"
					required
	                [(ngModel)]="model.email" name="email"
					#email="ngModel">
				<div [hidden]="email.valid || email.pristine" class="alert alert-danger">Champs obligatoire.</div>
			</div>
			<div class="form-group">
				<label for="course">Sujet</label>
				<input type="text"
					class="form-control" id="sujet"
					[(ngModel)]="model.sujet" name="sujet"
					#sujet="ngModel">
			</div>
			<button type="submit" class="btn btn-danger">Submit</button>
		</form>
	</div>
</div>
<div [hidden]="!submitted">
  <h2>Merci</h2>
  <div class="row">
    <div class="col-md-3">Nom et prénom:</div>
    <div class="col-md-9  pull-left">{{ model.name }}</div>
  </div>
  <div class="row">
    <div class="col-md-3">Email:</div>
    <div class="col-md-9">{{ model.email }}</div>
  </div>
  <div class="row">
    <div class="col-md-3">Sujet:</div>
    <div class="col-md-9">{{ model.sujet }}</div>
  </div>
</div>

Etape 4 :

L’injection du notre component Contact dans le component principale de l’application

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<app-contact></app-contact>', // ici
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
}

Etape 5 :

L’injection du module form d’Angular dans app.module.ts

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; //ici et dans imports en bas "FormsModule"

import { AppComponent } from './app.component';
import { ContactComponent } from './contact/contact.component';

@NgModule({
  declarations: [
    AppComponent,
    ContactComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Etape 6 :

la partie la plus importante est la modification du notre component Contact

//Contact.component.ts

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

import { Contact }    from './Contact';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent implements OnInit {

  

  ngOnInit() {
  }

  // on crée une instance ici
  model = new Contact('Utilisateur', 'email@email.com', 'Sujet de test');
  // on première étape on affiche que le formulaire
  submitted = false;
  // après submit
  onSubmit() { 
  		this.submitted = true; 
  }
  active = true;
  // Affichage des Récapitulatif 
  get diagnostic() { 
  		return JSON.stringify(this.model); 
  }

}