用于创建和编辑数据Angular4的相同表格 [英] Same form for creating and editing data Angular4

问题描述

这是具有两个方式绑定的输入字段的表单.目的是创建相同的表单来编辑和创建数据.这已经完成了，但是我很确定会有更好的方法来做到这一点(例如使用AbstractControl功能).我在这里也错过了一个解决方法-如果单击clickEdit()，则需要使用用户想要编辑的对象来更新表单值.感谢您的帮助，尤其是有关AbstractControl和NgModel的说明.

Here is a form with two way-binded input fields. The goal was to create the same form to edit and create data. That was accomplished, but I am pretty sure that there could be a better way to do this (like using AbstractControl features). I also miss one fix here - if clickEdit() being clicked need to update form values with that object which user wants to edit. Thanks for any help and especially explanations about AbstractControl and 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("", Validators.required),
      email : new FormControl("", Validators.required),
      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 ,
      username : this.username,
      email : this.email ,
      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.您从表单中获取的对象与您的user匹配，因此您可以做的就是将该值原样推入数组.

I would make quite a few changes to your form. ngModel is totally redundant here as you are using a reactive form. Utilize that instead and remove all ngModel's. The object you are getting from the form, is matching your user, so what you can do, is just push that value as is to the array.

因此，您的模板应该看起来像这样(简称，与其余代码一样):

So your template should look something like this (shortened, as the rest of code):

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

在这种情况下，我在表单的构建中使用了一个隐藏字段，该字段也被排除在表单对象之外，因为它是disabled.这对我们是一个帮助，因此我们可以区分这是一个新的user还是正在编辑user.该值保存数组中user的索引.因此，如果该值存在，我们就知道要更新数组中的对象，如果该值不存在，就让我们将用户推送到该数组.

In the build of the form I have in this case used a hidden field, that is also excluded from the form object as it is disabled. This is a helper for us, so we can differentiate if this is a new user, or if we are editing a user. The value holds the index of the user from your array. So if that value exists, we know to update the object in the array, if the value does not exist, let's push the user to the array.

这可以通过多种方式解决，但是以上是一种选择.

This could be solved by numerous ways, but above is one option.

this.form = this.fb.group({
  index: [{value: null, disabled:true}]
  username : ['', Validators.required],
  email : ['', Validators.required],
});

因此，根据以上内容，我们可以将onRegisterSubmit修改为如下所示:

So according to the above, we can modify the onRegisterSubmit to look like the following:

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
}

当我们要编辑用户时，我们在模板中传递索引和用户

When we want to edit a user, we pass the index and the user in template

<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)输入具有现有值的字段:

And then we use setValue (or patchValue) to enter the fields with the existing values:

userEdit(user, i) {
  this.form.setValue({
    index: i,
    username: user.username,
    email: user.email
  })
}

应该这样做！现在，我们可以看到有多少可以简化您的代码并摆脱一些不必要的事情！ :)

That should do it! So now we can see how much we could simplify your code and get rid of some unnecessary things! :)

这篇关于用于创建和编辑数据Angular4的相同表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！