虚拟表格

Question

这是一个包含两个方式绑定输入字段的表单。目标是创建相同的表单来编辑和创建数据。这已经完成，但我很确定可以有更好的方法来实现这一点（比如使用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在这里完全是多余的，因为您使用的是被动形式。使用它代替并删除所有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>

在我在这种情况下构建的表单中使用了一个隐藏字段，它也从表单对象中排除，因为它是disabled。这是我们的帮助，因此我们可以区分这是一个新user，还是我们正在编辑user。该值保存数组中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
  })
}

应该这样做！所以现在我们可以看到我们可以简化你的代码并摆脱一些不必要的东西！：）

Answer 2

虚拟表格

创建可重复使用的表单。

文件夹结构

用法

用户表单组件

stringNub = string.strip().replace("Total: ","")

<form (ngSubmit)="submit(form)" [formGroup] = "form">
  <input type="text" formControlName="username" >
  <button type="submit"[disabled]="!form.valid"> Submit</button>
  <button type="button" (click)="cancel()"></button>
</form>

添加用户组件

@Input() formData;
@Output() onSubmit = new EventEmitter();
@Output() onCancel = new EventEmitter();

ngOnInit(){
    this.form = this.fb.group({
      username : ['', Validators.required]
    });

    // Edit Mode will have formData.
    if(this.formData){
        this.form.patchValue(this.formData)
    }
}

submit(){
   if(this.form.valid){
       this.onSubmit.emit(this.form.value)
   }
}

cancel(){
  this.onCancel.emit();
}

<user-form                  
    (onSubmit)="addUser($event)"  
    (onCancel)="cancel()">
</user-form>

编辑用户组件

addUser(data){
   // Call Http Service to save data
}

cancel(){
   // navigate to different route or something else
}

<user-form 
    [formData]="formData"                 
    (onSubmit)="updateUser($event)"  
    (onCancel)="cancel()">
</user-form>

专业人士

一次性使用的单个组件
可以在整个应用程序中的任何地方重复使用伪表单。
易于维护和扩展表格

缺点

对于每个页面，您将有3个组件（添加，编辑，表单）。

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

2 个答案:

虚拟表格

文件夹结构

用法