Angular 2 - Forms
Angular 2 può anche progettare moduli che possono utilizzare l'associazione a due vie utilizzando l'estensione ngModeldirettiva. Vediamo come possiamo ottenere questo risultato.
Step 1- Crea un modello che sia un modello di prodotti. Crea un file chiamatoproducts.ts file.
Step 2 - Inserisci il seguente codice nel file.
export class Product {
constructor (
public productid: number,
public productname: string
) { }
}
Questa è una classe semplice che ha 2 proprietà, productid e productname.
Step 3 - Crea un componente del modulo prodotto chiamato componente product-form.component.ts e aggiungi il codice seguente -
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');
}
I seguenti punti devono essere annotati riguardo al programma di cui sopra.
Crea un oggetto della classe Product e aggiungi valori a productid e productname.
Utilizza templateUrl per specificare la posizione del nostro product-form.component.html che eseguirà il rendering del componente.
Step 4- Crea il modulo vero e proprio. Crea un file chiamato product-form.component.html e inserisci il codice seguente.
<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>
Il punto seguente deve essere notato sul programma di cui sopra.
Il ngModel viene utilizzata per associare l'oggetto del prodotto agli elementi separati del modulo.
Step 5 - Inserisci il seguente codice nel file app.component.ts.
import { Component } from '@angular/core';
@Component ({
selector: 'my-app',
template: '<product-form></product-form>'
})
export class AppComponent { }
Step 6 - Inserisci il codice seguente nel file 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- Salva tutto il codice ed esegui l'applicazione utilizzando npm. Vai al tuo browser, vedrai il seguente output.