Winkel 2 - Formen

Angular 2 kann auch Formulare entwerfen, die eine bidirektionale Bindung mit dem verwenden können ngModelRichtlinie. Mal sehen, wie wir das erreichen können.

Step 1- Erstellen Sie ein Modell, das ein Produktmodell ist. Erstellen Sie eine Datei mit dem Namenproducts.ts Datei.

Step 2 - Fügen Sie den folgenden Code in die Datei ein.

export class Product { 
   constructor ( 
      public productid: number, 
      public productname: string 
   ) {  } 
}

Dies ist eine einfache Klasse mit zwei Eigenschaften: Produkt-ID und Produktname.

Step 3 - Erstellen Sie eine Produktformularkomponente mit dem Namen product-form.component.ts und fügen Sie den folgenden Code hinzu: -

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

Die folgenden Punkte müssen über das obige Programm beachtet werden.

• Erstellen Sie ein Objekt der Produktklasse und fügen Sie der Produkt-ID und dem Produktnamen Werte hinzu.

• Verwenden Sie die templateUrl, um den Speicherort unserer product-form.component.html anzugeben, in der die Komponente gerendert wird.

Step 4- Erstellen Sie das eigentliche Formular. Erstellen Sie eine Datei mit dem Namen product-form.component.html und platzieren Sie den folgenden Code.

<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>

Der folgende Punkt muss über das obige Programm beachtet werden.

• Das ngModel Die Direktive wird verwendet, um das Objekt des Produkts an die einzelnen Elemente im Formular zu binden.

Step 5 - Fügen Sie den folgenden Code in die Datei app.component.ts ein.

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

@Component ({
   selector: 'my-app',
   template: '<product-form></product-form>'
})
export class AppComponent { }

Step 6 - Fügen Sie den folgenden Code in die Datei app.module.ts ein

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- Speichern Sie den gesamten Code und führen Sie die Anwendung mit npm aus. Gehen Sie zu Ihrem Browser, Sie sehen die folgende Ausgabe.