Angular 4 实例（第二部分）
Angular 4 实例（第二部分）
由于我们没有添加任何CSS，footer.component.css文件是空的。此外，footer.compoent.spec.ts也是空的，因为这里不考虑测试用例。
对于页脚，我们将只绘制一条水平线，如前一篇文章所示 .html文件。
现在让我们看看用户登录组件是如何工作的。我们为用户登录组件创建了以下文件：userlogin.component.css, userlogin.component.html, userlogin.component.ts和userlogin.component.spec.ts
这些文件的细节如下：
userlogin.component.html
<div class="form_container"> <form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" > <header>Login</header> <label>Username <span>*</span></label> <input type="text" name="uname" formControlName="uname"/> <div class="help">At least 6 character</div> <label>Password <span>*</span></label> <input type="password" class="fortextbox" name="passwd" formControlName="passwd"/> <div class="help">Use upper and lowercase lettes as well</div> <button [disabled]="!formdata.valid" value="Login">Login</button> </form> </div>
这里，我们创建了具有两个输入控件用户名和密码的表单。这是一种模型驱动的表单方法，其细节将在第14章表单中解释。
用户名和密码是强制性的，因此ts中增加了对用户名和密码的验证，单击提交按钮后，控件被传递给OnClickSubmit，该控件在ts文件中定义。
userlogin.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { Router} from '@angular/router';
@Component({
selector: 'app-userlogin',
templateUrl: './userlogin.component.html',
styleUrls: ['./userlogin.component.css']
})
export class UserloginComponent implements OnInit {
formdata;
constructor(private router: Router) { }
ngOnInit() {
this.formdata = new FormGroup({
uname: new FormControl("", Validators.compose([
Validators.required,
Validators.minLength(6)
])),
passwd: new FormControl("", this.passwordvalidation)
});
}
passwordvalidation(formcontrol) {
if (formcontrol.value.length < 5) {
return {"passwd" : true};
}
}
onClickSubmit(data) {
console.log(data.uname);
if (data.uname == "systemadmin" && data.passwd == "admin123") {
alert("Login Successful");
this.router.navigate(['app-mainpage'])
}
}
}对于表单控制和验证，如下所示导入模块
import { FormGroup, FormControl, Validators} from '@angular/forms';当用户和密码正确时，我们需要路由来导航到不同的组件。为此，如下所示导入路由：
import { Router} from '@angular/router';在ngOnInit，表单的验证已经完成。我们需要用户名超过六个字符，并且该字段是必填字段。同样的条件也适用于密码。
单击提交后，我们可以检查用户名是否为systemadmin，密码是否为admin123。如果是，将显示一个对话框，显示登录成功，路由导航到应用app-mainpage。
在userlogin.component.css文件中为表单添加了如下CSS：
.form_container{
margin : 0 auto;
width:600px;
}
form {
background: white;
width: 500px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
font-family: lato;
position: relative;
color: #333;
border-radius: 10px;
}
form header {
background: #FF3838;
padding: 30px 20px;
color: white;
font-size: 1.2em;
font-weight: 600;
border-radius: 10px 10px 0 0;
}
form label {
margin-left: 20px;
display: inline-block;
margin-top: 30px;
margin-bottom: 5px;
position: relative;
}
form label span {
color: #FF3838;
font-size: 2em;
position: absolute;
left: 2.3em;
top: -10px;
}
form input {
display: block;
width: 50%;
margin-left: 20px;
padding: 5px 20px;
font-size: 1em;
border-radius: 3px;
outline: none;
border: 1px solid #ccc;
}
form .help {
margin-left: 20px;
font-size: 0.8em;
color: #777;
}
form button {
position: relative;
margin-top: 30px;
margin-bottom: 30px;
left: 50%;
transform: translate(-50%, 0);
font-family: inherit;
color: white;
background: #FF3838;
outline: none;
border: none;
padding: 5px 15px;
font-size: 1.3em;
font-weight: 400;
border-radius: 3px;
box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.4);
cursor: pointer;
transition: all 0.15s ease-in-out;
}
form button:hover {
background: #ff5252;
}serlogin.component.spec.ts文件为空，因为目前没有测试用例。
现在让我们讨论mainpage组件的工作原理。为mainpage组件创建如下文件：mainpage.component.ts, mainpage.component.html, mainpage.component.css和mainpage.component.spect.ts。
mainpage.component.ts
import { Component, OnInit, ViewChild} from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import {Http, Response, Headers, RequestOptions } from "@angular/http";
import 'rxjs/add/operator/map';
@Component({
selector: 'app-mainpage',
templateUrl: './mainpage.component.html',
styleUrls: ['./mainpage.component.css']
})
export class MainpageComponent implements OnInit {
formdata;
cutomerdata;
constructor(private http: Http) { }
stateCtrl: FormControl;
ngOnInit() {
this.formdata = new FormGroup({
fname: new FormControl("", Validators.compose([
Validators.required,
Validators.minLength(3)
])),
lname: new FormControl("", Validators.compose([
Validators.required,
Validators.minLength(3)
])),
address:new FormControl(""),
phoneno:new FormControl("")
});
}
onClickSubmit(data) {
document.getElementById("custtable").style.display="";
this.cutomerdata = [];
for (var prop in data) {
this.cutomerdata.push(data[prop]);
}
console.log(this.cutomerdata);
}
}我们已经创建了一个客户表格，上面有名字、姓氏、地址和电话号码。同样的验证是通过ngOnInit功能完成的。单击提交时，控件将进入OnClickSubmit函数。这里，用于显示输入详细信息的表格变得可见。
customerdata从JSON转换为数组，这样我们就可以在ngFor中对表使用它，这是在.HTML文件中完成的，如下所示。
mainpage.component.html
<div class="form_container">
<form [formGroup]="formdata" (ngSubmit) = "onClickSubmit(formdata.value)" >
<header>Customer Details</header>
<label>FirstName <span>*</span></label>
<input type="text" name="fname" formControlName="fname"/>
<label>LastName <span>*</span></label>
<input type="text" name="lname" formControlName="lname"/>
<label>Address <span></span></label>
<input type="text" name="address" formControlName="address"/>
<label>Phone No <span></span></label>
<input type="text" name="phoneno" formControlName="phoneno"/>
<button [disabled]="!formdata.valid" value="Submit">Submit</button>
</form>
</div>
<br/>
<div id="custtable" style="display:none;margin:0 auto;">
<table>
<tr>
<td>FirstName</td>
<td>LastName</td>
<td>Address</td>
<td>Phone No</td>
</tr>
<tr>
<td *ngFor="let data of cutomerdata">
<h5>{{data}}</h5>
</td>
</tr>
</table>
</div>这里，第一个div有客户详细信息，第二个div有表格，它将显示输入的详细信息。用户登录和客户详细信息的显示如下所示。包含登录表单以及页眉和页脚的页面。
输入详细信息后，显示如下所示：
单击提交后，将显示一个对话框，其中显示登录成功。
如果详细信息无效，将显示一个对话框，其中显示无效登录，如下所示：
如果登录成功，它将进入下一种形式的客户详细信息，如下所示：
输入并提交详细信息后，将显示一个对话框，其中显示客户详细信息已添加，如下图所示：
当我们在上面的截图中点击OK时，详细信息会出现在下面的截图中：
