angular - 用于创建和编辑数据的相同形式 Angular4

Question

这是一个带有两个绑定(bind)输入字段的表单。目标是创建相同的表单来编辑和创建数据。这已经完成，但我很确定可以有更好的方法来做到这一点(比如使用 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("", 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 = '');   
    });    
  }
}

Answer 1

我会对您的表单进行相当多的更改。 ngModel 在这里完全多余，因为您使用的是 react 形式。而是利用它并删除所有 ngModel。您从表单中获取的对象与您的 user 相匹配，因此您可以做的就是将该值按原样推送到数组中。

所以你的模板应该看起来像这样(缩短，作为代码的其余部分):

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

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

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

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

所以根据上面的内容，我们可以修改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
  })
}

应该可以的!所以现在我们可以看到我们可以在多大程度上简化您的代码并摆脱一些不必要的东西! :)