Angulaire 2 - Formes
Angular 2 peut également concevoir des formulaires qui peuvent utiliser une liaison bidirectionnelle à l'aide du ngModeldirectif. Voyons comment nous pouvons y parvenir.
Step 1- Créez un modèle qui est un modèle de produits. Créez un fichier appeléproducts.ts fichier.
Step 2 - Placez le code suivant dans le fichier.
export class Product {
constructor (
public productid: number,
public productname: string
) { }
}
Il s'agit d'une classe simple qui a 2 propriétés, productid et productname.
Step 3 - Créez un composant de fiche produit appelé composant product-form.component.ts et ajoutez le code suivant -
import { Component } from '@angular/core';
import { Product } from './products';
@Component ({
selector: 'product-form',
templateUrl: './product-form.component.html'
})
export class ProductFormComponent {
model = new Product(1,'ProductA');
}
Les points suivants doivent être notés à propos du programme ci-dessus.
Créez un objet de la classe Product et ajoutez des valeurs au productid et au productname.
Utilisez le templateUrl pour spécifier l'emplacement de notre product-form.component.html qui rendra le composant.
Step 4- Créez le formulaire réel. Créez un fichier appelé product-form.component.html et placez le code suivant.
<div class = "container">
<h1>Product Form</h1>
<form>
<div class = "form-group">
<label for = "productid">ID</label>
<input type = "text" class = "form-control" id = "productid" required
[(ngModel)] = "model.productid" name = "id">
</div>
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text" class = "form-control" id = "name"
[(ngModel)] = "model.productname" name = "name">
</div>
</form>
</div>
Le point suivant doit être noté à propos du programme ci-dessus.
le ngModel directive est utilisée pour lier l'objet du produit aux éléments séparés sur le formulaire.
Step 5 - Placez le code suivant dans le fichier app.component.ts.
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: '<product-form></product-form>'
})
export class AppComponent { }
Step 6 - Placez le code ci-dessous dans le fichier app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { ProductFormComponent } from './product-form.component';
@NgModule ({
imports: [ BrowserModule,FormsModule],
declarations: [ AppComponent,ProductFormComponent],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Step 7- Enregistrez tout le code et exécutez l'application en utilisant npm. Accédez à votre navigateur, vous verrez la sortie suivante.