这个得上一篇:https://ithelp.ithome.com.tw/articles/10258602
从checkout.component.html档案-继续新增除了First Name的其他资讯
复制画线这段
<div class="main-content page-m">
<div class="section-content section-content-p30">
<div class="container-fluid">
<form [formGroup]="checkoutFormGroup">
<div formGroupName="customer" class="form-area">
<h3>客户姓名 </h3>
<div class="row">
<div class="col-md-2"><label>First Name</label></div>
<div class="col-md-9">
<div class="input-space">
<input formControlName="firstName" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"><label>Last Name</label></div>
<div class="col-md-9">
<div class="input-space">
<input formControlName="lastName" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"><label>Email</label></div>
<div class="col-md-9">
<div class="input-space">
<input formControlName="email" type="text">
</div>
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-info">Purchase</button>
</div>
</form>
</div>
</div>
</div>
目前长这样:
再到checkout.component.ts档案-修改成可以让按键做动的语法
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-checkout',
templateUrl: './checkout.component.html',
styleUrls: ['./checkout.component.css']
})
export class CheckoutComponent implements OnInit {
checkoutFormGroup: FormGroup;
totalPrice: number = 0;
totalQuantity: number = 0;
constructor(private forBuilder: FormBuilder) { }
ngOnInit(): void {
this.checkoutFormGroup = this.forBuilder.group({
customer:this.forBuilder.group({
firstName:[''],
lastName:[''],
email:['']
})
});
}
onSubmit(){
console.log("Handling the submit button");
console.log(this.checkoutFormGroup.get('customer').value);
}
}
再回到checkout.component.html档案.增加(ngSubmit)="onSubmit()语法:
<div class="main-content page-m">
<div class="section-content section-content-p30">
<div class="container-fluid">
<form [formGroup]="checkoutFormGroup" (ngSubmit)="onSubmit()">
<div formGroupName="customer" class="form-area">
<h3>客户姓名 </h3>
<div class="row">
<div class="col-md-2"><label>First Name</label></div>
<div class="col-md-9">
<div class="input-space">
<input formControlName="firstName" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"><label>Last Name</label></div>
<div class="col-md-9">
<div class="input-space">
<input formControlName="lastName" type="text">
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"><label>Email</label></div>
<div class="col-md-9">
<div class="input-space">
<input formControlName="email" type="text">
</div>
</div>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-info">Purchase</button>
</div>
</form>
</div>
</div>
</div>
来测试看看-
再到checkout.component.ts档案-修改一些细微的部分:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-checkout',
templateUrl: './checkout.component.html',
styleUrls: ['./checkout.component.css']
})
export class CheckoutComponent implements OnInit {
checkoutFormGroup: FormGroup;
totalPrice: number = 0;
totalQuantity: number = 0;
constructor(private forBuilder: FormBuilder) { }
ngOnInit(): void {
this.checkoutFormGroup = this.forBuilder.group({
customer:this.forBuilder.group({
firstName:[''],
lastName:[''],
email:['']
})
});
}
onSubmit(){
console.log("Handling the submit button");
console.log(this.checkoutFormGroup.get('customer').value);
console.log("The email address is "+this.checkoutFormGroup.get('customer').value.email);
}
}
然後再继续修改:
到checkout.component.ts 档案-增加运送住址+付款住址+信用卡资料:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-checkout',
templateUrl: './checkout.component.html',
styleUrls: ['./checkout.component.css']
})
export class CheckoutComponent implements OnInit {
checkoutFormGroup: FormGroup;
totalPrice: number = 0;
totalQuantity: number = 0;
constructor(private formBuilder: FormBuilder) { }
ngOnInit(): void {
this.checkoutFormGroup = this.formBuilder.group({
customer:this.formBuilder.group({
firstName:[''],
lastName:[''],
email:['']
}),
shippingAddress: this.formBuilder.group({
street: [''],
city: [''],
state: [''],
country: [''],
zipCode: ['']
}),
billingAddress: this.formBuilder.group({
street: [''],
city: [''],
state: [''],
country: [''],
zipCode: ['']
}),
creditCard: this.formBuilder.group({
cardType: [''],
nameOnCard: [''],
cardNumber: [''],
securityCode: [''],
expirationMonth: [''],
expirationYear: ['']
})
});
}
onSubmit(){
console.log("Handling the submit button");
console.log(this.checkoutFormGroup.get('customer').value);
console.log("The email address is "+this.checkoutFormGroup.get('customer').value.email);
}
}
这个得下一篇:https://ithelp.ithome.com.tw/articles/10258795
<<: [教学] 如何架设狗狗币全节点 (更新 1.14.4 系统)
这一篇接续16.移转 Aras PLM大小事-系统使用者与角色 起初是想要将公司内的BPM专案请购的...
6 拓朴排序问题 现在让我们来考虑另一个可以使用 DFS 来解决的经典范例:拓朴排序问题。想像有 N...
这是 Roblox 从零开始系列,游戏环境章节的第一个单元,你将学会如何去针对场景进行後制 【You...
今天的内容会跟各位介绍 Google Cloud 相关的基础知识,希望不会不小心的讲成像业配文QQ,...
1.意义 [] 很多个东西要拿出来 {} 多个变数形容她 function 重复做的事情 2.推敲过...