Angular form表单是一种基于Angular框架的表单,它可以帮助开发者快速创建功能强大的表单应用。Angular form表单可以让开发者使用HTML标签来定义表单,并且可以使用Angular提供的指令来实现表单验证、数据绑定和其他功能。
Angular form表单有两个重要的部分:控制器和视图。控制器是一个JavaScript对象,它包含了所有的表单数据,并且可以处理由视图传递过来的数据。而视图是一个HTML文件,它包含了所有的HTML标签,这些标签会将数据映射到相应的位置。
// 创建一个 Angular Form 表单 var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name = ''; });
Angular form表单还具有很多高级特性,例如可以使用ng-model来实现双向数据绑定、ng-submit来处理表单提交、ng-show/hide来显示/隐藏元素、ng-disabled来阻止用户对元素进行修改、ng-pattern来验证字符串格式、ng-minlength/maxlength来限制字符串长度、ng-required来验证必填字段。
// 利用 ng-model 和 ng-submit 来处理 Angular Form 表单 <form ng-controller="myCtrl" ng-submit="submitForm()"> <input type="text" name="name" ng-model="name" required /> <input type="submit" value="Submit" /> </form> // 在 Controller 里处理 submitForm() 方法 app.controller('myCtrl', function($scope) { $scope.name = ''; $scope.submitForm = function() { // 处理 Form 提交 }; });
本指南基于“入门教程”基本 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 <form>
元素和一个 Purchase 按钮。formGroup
属性绑定将 checkoutForm
绑定到 HTML 中的 <form>
标签。<form [formGroup]="checkoutForm">
<button class="button" type="submit">Purchase</button>
</form>
form
标签上,使用 ngSubmit
事件绑定来侦听表单提交,并以 checkoutForm
的值为参数调用 onSubmit()
方法。<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
</form>
name
和 address
的 <input>
字段,每个字段都有一个 formControlName
属性,该属性绑定到 checkoutForm
表单控件,以将 name
和 address
绑定到其 <input>
字段。完整的组件如下:<h3>Cart</h3>
<p>
<a routerLink="/shipping">Shipping Prices</a>
</p>
<div class="cart-item" *ngFor="let item of items">
<span>{{ item.name }} </span>
<span>{{ item.price | currency }}</span>
</div>
<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
<div>
<label for="name">
Name
</label>
<input id="name" type="text" formControlName="name">
</div>
<div>
<label for="address">
Address
</label>
<input id="address" type="text" formControlName="address">
</div>
<button class="button" type="submit">Purchase</button>
</form>
将少量物品放入购物车后,用户可以查看他们的物品,输入他们的姓名和地址,然后提交购买的商品。
要确认提交,请打开控制台以查看包含你所提交的名称和地址的对象。
里程碑4:危机中心本节将向你展示如何在应用中添加子路由并使用相对路由。要为应用当前的危机中心添加更多特性,请执行类似于her...
测试实用工具API本页面描述了一些最有用的Angular测试特性。Angular测试实用工具包括TestBed、ComponentFixture以及一些...
浏览翻译后的范例应用要浏览Angular国际化指南中使用的带法语翻译的范例应用,参见liveexample/下载范例。fr-CA和en-US范例以下...
可复用动画本主题提供了一些关于如何创建可复用动画的例子。前提条件在继续本主题前,你需要熟悉下列知识:Angular动画简介转场...
静态模板为了演示Angular如何增强静态HTML,你可以创建一个纯静态HTML网页,然后仔细观察我们可以如何把这些HTML代码变成一个模...
安装moment如下:npm install momentmoment提供了一个函数,可用于将JavaScript的date对象包装到moment对象中。有很多方法来创建...
Node.js本身是以单线程的模式运行的,但它使用的是事件驱动来处理并发,这样有助于我们在多核 cpu 的系统上创建多个子进程,从而...
TypeScript do ... while循环do ... while循环类似于while循环,只是do ... while循环不会在第一次循环执行时评估条件。但是,将...
TypeScript 字符串concat()方法concat()方法添加两个或多个字符串并返回一个新的单个字符串。语法string.concat(...
命名空间是对相关代码进行逻辑分组的一种方法。这是内置于TypeScript中的,与JavaScript不同,其中变量声明进入全局范围,如果在...