【发布时间】：2017-07-27 12:28:56
【问题描述】：
它是一个粗鲁的应用程序，我将用户信息输入到表单中，然后将其保存在数组中，然后将其呈现到表中。我可以添加更多具有不同用户数据的行。我可以从表中删除某一行。我也有一个编辑按钮，但我不知道该怎么做。
Register.html 文件
<div class="container">
<h2 class="page-header">Register</h2>
<form (ngSubmit)="onRegisterSubmit()" [formGroup] = "form">
<div class="form-group">
<label>Full Name</label>
<input type="text" [(ngModel)]="fullname" formControlName="fullname" class="form-control" >
</div>
<div class="form-group">
<label>Username</label>
<input type="text" [(ngModel)]="username" formControlName="username" class="form-control" >
</div>
<div class="form-group">
<label>Email</label>
<input type="text" [(ngModel)]="email" formControlName="email" class="form-control" >
</div>
<div class="form-group">
<label>Password</label>
<input type="password" [(ngModel)]="password" formControlName="password" class="form-control">
</div>
<input type="submit" class="btn btn-primary" value="Submit" [disabled]="!form.valid">
</form>
<br>
<br>
<table border="2" class="table table-striped">
<tr>
<th>Full Name</th>
<th>Username</th>
<th>Email</th>
<th>Password</th>
<th>Delete</th>
<th>Edit</th>
</tr>
<div > </div>
<tr *ngFor="let user of userDetails">
<td>{{user.username}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.password}}</td>
<td><button (click)="userDelete()">X</button></td>
<td><button (click)="userEdit()">Edit</button></td>
</tr>
</table>
</div>
注册.ts文件
export class RegisterComponent implements OnInit {
fullname : string;
username : string;
email : string;
password : string;
userDetails:Array<object>;
constructor(
private validateService: ValidateService,
private flashMessage:FlashMessagesService)
{ }
form;
ngOnInit() {
this.userDetails=[];
this.form = new FormGroup({
fullname : new FormControl("", Validators.required),
username : new FormControl("", Validators.required),
email : new FormControl("", Validators.required),
password : new FormControl("", Validators.required)
});
}
onRegisterSubmit(){
let user = {
fullname : this.fullname ,
username : this.username,
email : this.email ,
password : this.password
}
this.userDetails.push(user);
if(!this.validateService.validateRegister(user)){
this.flashMessage.show('Please fill in all fields', {cssClass: 'alert-danger', timeout: 3000});
return false;
}
// Validate Email
if(!this.validateService.validateEmail(user.email)){
this.flashMessage.show('Please use a valid email', {cssClass: 'alert-danger', timeout: 3000});
return false;
}
}
userDelete(){
this.userDetails.pop();
}
userEdit(){
//No logic
}
}
验证服务文件
export class ValidateService {
constructor() { }
validateRegister(user){
if(user.fullname == undefined || user.email == undefined || user.username == undefined || user.password == undefined){
return false;
} else {
return true;
}
}
validateEmail(email){
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
}
【问题讨论】：
-
那么你的问题是什么？
-
如何编辑通过提交表单保存的详细信息