Angular 2 - Biểu mẫu

Angular 2 cũng có thể thiết kế các biểu mẫu có thể sử dụng liên kết hai chiều bằng cách sử dụng ngModelchỉ thị. Hãy xem làm thế nào chúng ta có thể đạt được điều này.

Step 1- Tạo một mô hình là một mô hình sản phẩm. Tạo một tệp có tênproducts.ts tập tin.

Step 2 - Đặt đoạn mã sau vào tệp.

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

Đây là một lớp đơn giản có 2 thuộc tính, productiontid và productname.

Step 3 - Tạo thành phần dạng sản phẩm được gọi là thành phần product-form.component.ts và thêm mã sau:

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

Những điểm sau đây cần lưu ý về chương trình trên.

  • Tạo một đối tượng của lớp Sản phẩm và thêm giá trị vào sản phẩm và tên sản phẩm.

  • Sử dụng templateUrl để chỉ định vị trí product-form.component.html của chúng tôi sẽ hiển thị thành phần.

Step 4- Tạo biểu mẫu thực tế. Tạo một tệp có tên product-form.component.html và đặt mã sau.

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

Điểm sau đây cần lưu ý về chương trình trên.

  • Các ngModel Chỉ thị được sử dụng để ràng buộc đối tượng của sản phẩm với các phần tử riêng biệt trên biểu mẫu.

Step 5 - Đặt mã sau vào tệp app.component.ts.

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

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

Step 6 - Đặt mã bên dưới vào tệp 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- Lưu tất cả mã và chạy ứng dụng bằng npm. Vào trình duyệt của bạn, bạn sẽ thấy kết quả sau.