Question

我有这个模板

<form [formGroup]="myForm">

  <div formArrayName="phones">

      <div *ngFor="let phone of phoneForms.controls; let i=index" 
            [formGroupName]="i">

          <input formControlName="area">
          <input formControlName="prefix">
          <input formControlName="line">

          <button (click)="deletePhone(i)">Delete</button>

      </div>
  </div>

  <button (click)="addPhone()">Add Phone Number</button>

</form>

这是控制器代码

ngOnInit() {
  this.myForm = this.fb.group({
    email: '',
    phones: this.fb.array([])
  })

}

get phoneForms() {
  return this.myForm.get('phones') as FormArray
}

addPhone() {

  const phone = this.fb.group({ 
    area: [],
    prefix: [],
    line: [],
  })

  this.phoneForms.push(phone);
}

deletePhone(i) {
  this.phoneForms.removeAt(i)
}

This how it looks

但是我只想显示一次表单字段，无论我们添加什么电话，都应该在下面的数据表或普通表中使用“编辑”和“删除”按钮来显示，这样，如果单击“编辑”，则特定数据会填充在上面的字段中

Answer 1

也许您可以实现所需的功能，例如：

除了您可编辑的模板之外，还创建只读版本
使用ngIf，除正在编辑当前手机时，始终显示只读版本
要跟踪正在编辑的电话，只需使用局部变量（例如电话的索引或ID（如果有））
当然可以通过您在只读模板中放置的编辑按钮来设置局部变量

这有意义吗？我猜您不需要为此的示例代码，看起来很简单吗？

祝你好运！

将员工电话从表单添加到表格

1 个答案: