这是一个带有两个方式绑定输入字段的表单.目标是创建相同的表单来编辑和创建数据.这已经完成,但我很确定可以有更好的方法来实现这一点(比如使用AbstractControl功能).我也错过了一个修复程序 – 如果单击clickEdit()需要使用该用户想要编辑的对象更新表单值.感谢您提供有关AbstractControl和NgModel的任何帮助和解释.
<div>
<form (ngSubmit)="clicked ? onEditSubmit($event) : onRegisterSubmit($event)" [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>
<button type="submit" class="btn btn-primary" [disabled]="!form.valid"> Submit </button>
</form>
</div>
<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; index as i">
<td>{{user.fullname}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.password}}</td>
<td><button (click)="userDelete()">X</button></td>
<td><button (click)="clickEdit(i)">Edit</button></td>
</tr>
</table>
和
import { Component } from '@angular/core';
import { initializeApp,database } from 'firebase';
import { FormControl,FormGroup,Validators } from '@angular/forms';
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],})
export class AppComponent {
fullname : string;
username : string;
email : string;
password : string;
clicked = false;
userDetails:Array<object>;
form;
ngOnInit() {
this.userDetails=[];
this.form = new FormGroup({
fullname : new FormControl("",Validators.required),username : new FormControl("",email : new FormControl("",password : new FormControl("",Validators.required)
});
}
onRegisterSubmit(e){
let user = {
fullname : this.fullname,username : this.username,email : this.email,password : this.password
}
this.userDetails.push(user);
this.clearInputFields(e);
}
editIndex = null;
clickEdit(i){
this.clicked = !this.clicked;
this.editIndex = i;
}
onEditSubmit(e) {
let editUser = {
fullname : this.fullname,password : this.password
}
this.userDetails[this.editIndex] = editUser;
this.clearInputFields(e);
this.clicked = !this.clicked;
}
clearInputFields(e){
let all = e.target.querySelectorAll('input');
Object.keys(all).forEach(key => {
console.log(all[key].value = '');
});
}
}
我会对你的表单进行一些修改. ngModel在这里完全是多余的,因为您使用的是被动形式.使用它代替并删除所有ngModel.您从表单中获取的对象与您的用户匹配,因此您可以做的就是将该值推送到数组.
所以你的模板应该看起来像这样(缩短,代码的其余部分)：
<form (ngSubmit)="onRegisterSubmit(form)" [formGroup] = "form"> <input type="text" formControlName="username" class="form-control" > <input type="submit" class="btn btn-primary" value="Submit" [disabled]="!form.valid"> </form>
在这种情况下,我在表单的构建中使用了一个隐藏字段,它也被禁用在表单对象中.这是我们的帮手,因此我们可以区分这是新用户,还是我们正在编辑用户.该值保存数组中用户的索引.因此,如果该值存在,我们知道更新数组中的对象,如果该值不存在,让我们将用户推送到数组.
这可以通过多种方式解决,但上面是一种选择.
this.form = this.fb.group({
index: [{value: null,disabled:true}]
username : ['',Validators.required],email : ['',});
所以根据上面的内容,我们可以将onRegisterSubmit修改为如下所示：
onRegisterSubmit(form) {
// since field is disabled,we need to use 'getRawValue'
let index = form.getRawValue().index
if(index != null) {
this.userDetails[index] = form.value
} else {
this.userDetails.push(form.value)
}
this.form.reset() // reset form to empty
}
<tr *ngFor="let user of userDetails; let i = index">
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td><button (click)="userEdit(user,i)">Edit</button></td>
</tr>
然后我们使用setValue(或patchValue)输入具有现有值的字段：
userEdit(user,i) {
this.form.setValue({
index: i,username: user.username,email: user.email
})
}
应该这样做！所以现在我们可以看到我们可以简化你的代码并摆脱一些不必要的东西！
