发表于： 2017-06-08 23:38:00
1 1097
今天完成的事情：
文件相对路径问题？
import { Component, OnInit, Inject} from '@angular/core';
@Component({
selector: 'app-login',
template: `
<style>
#logen{
position: absolute;
top: 50%;
left:50%;
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
}
#logen h1{
color: #fff;
text-shadow:0 0 10px;
letter-spacing: 1px;
text-align: center;
}
h1{
font-size: 2em;
margin: 0.67em 0;
}
input{
width: 300px;
height: 40px;
margin-bottom: 10px;
outline: none;
padding: 10px;
font-size: 13px;
border: 1px solid #312E3D;
border-radius: 4px;
}
button{
width: 300px;
min-height: 20px;
display: block;
background-color: #4a77d4;
border: 1px solid #3762bc;
color: #fff;
padding: 9px 14px;
font-size: 15px;
line-height: normal;
border-radius: 5px;
margin: 0;
cursor: pointer;
}
.err{
margin-bottom:10px;
color:red;
}
</style>
<div id="logen">
<h1>喝我水站后台登录</h1>
<form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
<fieldset ngModelGroup="login">
<input type="text"
readonly onfocus="this.PremoveAttribute('readonly');"
placeholder="用户名"
name="username"
[(ngModel)]="username"
#usernameRef="ngModel"
required
minlength="5"
/>
<div class="err" *ngIf="usernameRef.errors?.required">请填写账号</div>
<div class="err" *ngIf="usernameRef.errors?.minlength">不得少于5个字数</div>
<input type="password"
readonly onfocus="this.removeAttribute('readonly');"
placeholder="密码"
[(ngModel)]="password"
name="password"
#passwordRef="ngModel"
required
/>
<div class="err" *ngIf="passwordRef.errors?.required">请填写密码</div>
<button type="submit">登录</button>
</fieldset>
</form>
</div>
`,
styles: []
})
export class LoginComponent implements OnInit {
username = '';
password = '';
constructor(@Inject('auth') private service) {
}
ngOnInit() {
}
onSubmit(formValue) {
console.log('auth result is:'
+ this.service.loginWithCredentials(formValue.login.username, formValue.login.password));
}
}
明天计划的事情：
继续学习angular
问题：
卡住了，想不起来
收获：
如上
返回列表
评论