कोणीय 2 - रूप

कोणीय 2 ऐसे रूपों को भी डिज़ाइन कर सकता है जो दो-तरफ़ा बाइंडिंग का उपयोग कर सकते हैं ngModelनिर्देश। आइए देखें कि हम इसे कैसे हासिल कर सकते हैं।

Step 1- एक मॉडल बनाएं जो एक उत्पाद मॉडल है। नामक एक फ़ाइल बनाएँproducts.ts फ़ाइल।

Step 2 - फाइल में निम्न कोड रखें।

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

यह एक साधारण वर्ग है जिसमें 2 गुण, productid और productname हैं।

Step 3 - उत्पाद-प्रपत्र घटक बनाएं, जिसे उत्पाद-form.component.ts घटक कहा जाता है और निम्नलिखित कोड जोड़ें -

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

उपरोक्त कार्यक्रम के बारे में निम्नलिखित बातों पर ध्यान देने की आवश्यकता है।

  • उत्पाद वर्ग की एक वस्तु बनाएँ और productid और productname में मान जोड़ें।

  • हमारे उत्पाद के स्थान-निर्दिष्ट करने के लिए टेम्प्लेट का उपयोग करें-form.component.html जो घटक को प्रस्तुत करेगा।

Step 4- वास्तविक रूप बनाएं। उत्पाद-form.component.html नामक एक फ़ाइल बनाएँ और निम्नलिखित कोड रखें।

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

उपरोक्त कार्यक्रम के बारे में निम्नलिखित बिंदु पर ध्यान देने की आवश्यकता है।

  • ngModel निर्देश का उपयोग प्रपत्र पर अलग-अलग तत्वों के उत्पाद की वस्तु को बांधने के लिए किया जाता है।

Step 5 - app.component.ts फ़ाइल में निम्न कोड रखें।

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

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

Step 6 - 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- सभी कोड को सहेजें और npm का उपयोग करके एप्लिकेशन को चलाएं। अपने ब्राउज़र पर जाएं, आपको निम्न आउटपुट दिखाई देगा।