Forms 积垢角度应用程序

这是一个crud应用程序，我将用户信息输入表单，然后将其保存在数组中，然后将其呈现到表中。我可以添加更多具有不同用户数据的行。我可以从表中删除某一行。我也有一个编辑按钮，但我不知道怎么做

Register.html文件

登记
全名
用户名
电子邮件
密码




全名
用户名
电子邮件
密码
删除
编辑
{{user.username}
{{user.username}
{{user.email}
{{user.password}}
X
编辑

Register.ts文件

导出类注册表组件实现OnInit{
全名：字符串；
用户名：字符串；
电子邮件：字符串；
密码：字符串；
userDetails：数组；
建造师(
私有validateService:validateService，
专用flashMessage:FlashMessages服务）
{ }
形式；
恩戈尼尼特（）{
this.userDetails=[]；
this.form=new FormGroup({
全名：new FormControl（“，Validators.required），
用户名：new FormControl（“，Validators.required），
电子邮件：new FormControl（“，Validators.required”），
密码：new FormControl（“，Validators.required）
});
}
onRegisterSubmit（）{
让用户={
全名：this.fullname，
用户名：this.username，
电子邮件：this.email，
密码：这个是密码
}
this.userDetails.push（用户）；
如果（！this.validateService.validateRegister（用户））{
this.flashMessage.show（'请填写所有字段'，{cssClass:'alert danger'，超时：3000}）；
返回false；
}
//验证电子邮件
如果（！this.validateService.validateEmail（user.email））{
this.flashMessage.show（'请使用有效的电子邮件'，{cssClass:'alert danger'，超时：3000}）；
返回false；
}
}
userDelete（）{
this.userDetails.pop（）；
}
userEdit（）{
//没有逻辑
}
}

验证服务文件

导出类验证服务{
构造函数（）{}
validateRegister（用户）{
if（user.fullname==未定义| | | user.email==未定义| | | user.username==未定义| | | user.password==未定义）{
返回false；
}否则{
返回true；
}
}
验证电子邮件（电子邮件）{
常量re=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{0-9]{1,3}.[1,3}.[0-9]{1,3}]）；（[a-zA Z-0-9]++]；
返回重新测试（电子邮件）；
}
}

硬编码新值很简单：

<tr *ngFor="let user of userDetails; index as i">
  <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(i)">Edit</button></td>
</tr>
    userEdit(i) {
     let editUser = this.userDetails[i];
     editUser = { fullname: 'Tadas Blynda', etc. } 
    }

{{user.username}
{{user.username}
{{user.email}
{{user.password}}
X
编辑
用户编辑（一）{
让editUser=this.userDetails[i]；
editUser={fullname:'Tadas Blynda'，等}
}

但您需要的可能是：

<div>
<form (ngSubmit)="onRegisterSubmit()" [formGroup] = "form" [hidden]="clicked">
  <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>
</div>

<div>
<form (ngSubmit)="onEditSubmit()" [formGroup] = "form" [hidden]="!clicked">
  <div class="form-group">
    <label>Full Name</label>
    <input type="text" [(ngModel)]="fullname" formControlName="fullname" class="form-control"
    placeholder="userDetails[editIndex]?.fullname" >

  </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>
</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>

全名
用户名
电子邮件
密码
全名
用户名
电子邮件
密码




全名
用户名
电子邮件
密码
删除
编辑
{{user.fullname}
{{user.username}
{{user.email}
{{user.password}}
X
编辑

及

导出类AppComponent{
全名：字符串；
用户名：字符串；
电子邮件：字符串；
密码：字符串；
单击=假；
userDetails：数组；
形式；
恩戈尼尼特（）{
this.userDetails=[]；
this.form=new FormGroup({
全名：new FormControl（“，Validators.required），
用户名：new FormControl（“，Validators.required），
电子邮件：new FormControl（“，Validators.required”），
密码：new FormControl（“，Validators.required）
});
}
onRegisterSubmit（）{
让用户={
全名：this.fullname，
用户名：this.username，
电子邮件：this.email，
密码：这个是密码
}
this.userDetails.push（用户）；
}
editIndex=null；
点击编辑（一）{
this.clicked=！this.clicked；
this.editIndex=i；
}
onEditSubmit（）{
让editUser={
全名：this.fullname，
用户名：this.username，
电子邮件：this.email，
密码：这个是密码
}
this.userDetails[this.editIndex]=editUser；
this.clicked=！this.clicked；
}
}

---

如果有任何问题，请告诉我。

硬编码新值很简单：

<tr *ngFor="let user of userDetails; index as i">
  <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(i)">Edit</button></td>
</tr>
    userEdit(i) {
     let editUser = this.userDetails[i];
     editUser = { fullname: 'Tadas Blynda', etc. } 
    }

{{user.username}
{{user.username}
{{user.email}
{{user.password}}
X
编辑
用户编辑（一）{
让editUser=this.userDetails[i]；
editUser={fullname:'Tadas Blynda'，等}
}

但您需要的可能是：

<div>
<form (ngSubmit)="onRegisterSubmit()" [formGroup] = "form" [hidden]="clicked">
  <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>
</div>

<div>
<form (ngSubmit)="onEditSubmit()" [formGroup] = "form" [hidden]="!clicked">
  <div class="form-group">
    <label>Full Name</label>
    <input type="text" [(ngModel)]="fullname" formControlName="fullname" class="form-control"
    placeholder="userDetails[editIndex]?.fullname" >

  </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>
</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>

全名
用户名
电子邮件
密码
全名
用户名
电子邮件
密码




全名
用户名
电子邮件
密码
删除
编辑
{{user.fullname}
{{user.username}
{{user.email}
{{user.password}}
X
编辑

及

导出类AppComponent{
全名：字符串；
用户名：字符串；
电子邮件：字符串；
密码：字符串；
单击=假；
userDetails：数组；
形式；
恩戈尼尼特（）{
this.userDetails=[]；
this.form=new FormGroup({
全名：new FormControl（“，Validators.required），
用户名：new FormControl（“，Validators.required），
电子邮件：new FormControl（“，Validators.required”），
密码：new FormControl（“，Validators.required）
});
}
onRegisterSubmit（）{
让用户={
全名：this.fullname，
用户名：this.username，
电子邮件：this.email，
密码：这个是密码
}
this.userDetails.push（用户）；
}
editIndex=null；
点击编辑（一）{
this.clicked=！this.clicked；
this.editIndex=i；
}
onEditSubmit（）{
让editUser={
全名：this.fullname，
用户名：this.username，
电子邮件：this.email，
密码：这个是密码
}
this.userDetails[this.editIndex]=editUser；
this.clicked=！this.clicked；
}
}

如果有任何问题，请告诉我。

那么您的问题是什么