创新互联Angular教程：Angular使用表单进行用户输入

使用表单进行用户输入

本指南基于“入门教程”基本 Angular 应用中的第三步“管理数据”。

创新互联专注于古田网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供古田营销型网站建设，古田网站制作、古田网页设计、古田网站官网定制、成都小程序开发服务，打造古田网络公司原创品牌,更为您提供古田网站排名全网营销落地服务。

本节将引导你添加基于表单的结账功能，以收集用户信息作为结账信息的一部分。

定义结帐表单模型

此步骤说明如何在组件类中建立结帐表单模型。表单模型决定表单的状态。

打开 cart.component.ts 。
从 @angular/forms 包导入 FormBuilder。此服务提供了用来生成控件的便捷方法。

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

import { CartService } from '../cart.service';

在 CartComponent 的 constructor() 中注入 FormBuilder 服务。该服务是你已经导入过的 ReactiveFormsModule 模块的一部分。

export class CartComponent {

  constructor(
    private cartService: CartService,
    private formBuilder: FormBuilder,
  ) {}
}

要收集用户的姓名和地址，请使用 FormBuilder 的 group() 方法来把 checkoutForm 属性设置为一个包含 name 和 address 字段的表单模型。

export class CartComponent {

  items = this.cartService.getItems();

  checkoutForm = this.formBuilder.group({
    name: '',
    address: ''
  });

  constructor(
    private cartService: CartService,
    private formBuilder: FormBuilder,
  ) {}
}

定义一个 onSubmit() 方法来处理表单。该方法允许用户提交其姓名和地址。此外，此方法会使用 CartService 的 clearCart() 方法重置表单并清除购物车。

整个购物车组件类如下：

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

import { CartService } from '../cart.service';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent {

  items = this.cartService.getItems();

  checkoutForm = this.formBuilder.group({
    name: '',
    address: ''
  });

  constructor(
    private cartService: CartService,
    private formBuilder: FormBuilder,
  ) {}

  onSubmit(): void {
    // Process checkout data here
    this.items = this.cartService.clearCart();
    console.warn('Your order has been submitted', this.checkoutForm.value);
    this.checkoutForm.reset();
  }
}

创建结帐表单

使用以下步骤在“购物车”视图的底部添加一个结帐表单。

在 cart.component.html 的底部，添加一个 HTML
元素和一个 Purchase 按钮。
使用 formGroup 属性绑定将 checkoutForm 绑定到 HTML 中的标签。

在 form 标签上，使用 ngSubmit 事件绑定来侦听表单提交，并以 checkoutForm 的值为参数调用 onSubmit() 方法。

添加 name 和 address 的字段，每个字段都有一个 formControlName 属性，该属性绑定到 checkoutForm 表单控件，以将 name 和 address 绑定到其字段。完整的组件如下：

Cart


  Shipping Prices



  {{ item.name }} 
  {{ item.price | currency }}




  
    
      Name
    
    
  

  
    
      Address

将少量物品放入购物车后，用户可以查看他们的物品，输入他们的姓名和地址，然后提交购买的商品。

要确认提交，请打开控制台以查看包含你所提交的名称和地址的对象。

网页题目：创新互联Angular教程：Angular使用表单进行用户输入
标题来源：http://www.mswzjz.com/qtweb/news1/201401.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容