编辑中具有反应形式问题的角度动态控件以及如何更新值

问题描述

我正在尝试使用反应式表单创建内联动态表单，我可以在 dom 中添加新对象和循环，但是当我按下编辑按钮时，它不起作用，并且在控制台中也出现错误。在对象中，我有属性 isEditable true 或 false 基于此属性文本框显示或隐藏但是当我尝试编辑时它不起作用另外我想知道当我点击更新按钮时如何更新对象中的值 stackblitz link

dynamicform.component.ts
import { Component,OnInit } from '@angular/core';
import { FormArray,FormGroup,FormBuilder } from "@angular/forms";
@Component({
  selector: 'app-dynamicform',templateUrl: './dynamicform.component.html',styleUrls: ['./dynamicform.component.css']
})
export class DynamicformComponent implements OnInit  {
  dynamicForm:FormGroup;
  isHidden: boolean = true;
  jkfa:[{a:"sfsdf"},{a:"wrwerer"}];
   constructor(private fb:FormBuilder) { 
    this.dynamicForm = fb.group({
      name1: [""],desc1: [""],aaaaa:this.fb.array([
             ])
    })
  };
   ngOnInit() {
  }
   get aaaaa(){
    return this.dynamicForm.get("aaaaa") as FormArray;
  }
   addEmptyRow(){
    this.isHidden =  false;
  }
  updteItem(){
    //console.log(event.target as HTMLInputElement)
  }
  removeItem(a){
     let confirmvar = confirm("Press a button!");
    if(confirmvar === true){
   
    this.aaaaa.removeAt(a)
    }
      }
  cancelItem(){
    this.aaaaa.value.forEach(element => {
      element.isEditable = false;
    })
     }
  editItem(id){
       this.aaaaa.value.forEach(element => {
       if(element.itemid ===id){
         element.isEditable = true;
       }
       console.log(this.aaaaa.value)
       });
  }
   save(){
    const newItem = this.fb.group({
      itemid:[this.aaaaa.length + 0],name:this.dynamicForm.get('name1').value,desc:this.dynamicForm.get('desc1').value,isEditable: false
         })
    this.aaaaa.push(newItem)
    //console.log( this.dynamicForm.get("items").value[this.items.length + 1])
    this.isHidden = true;
    //console.log(this.aaaaa.value)
    this.dynamicForm.patchValue({
      name1: [""],})
  }
   cancelNewItem(){
      this.isHidden = true;
  }
}
<div class="container">

dynamicform.component.html
<form [formGroup]="dynamicForm" class="form-inline">
    
       <div class="row">
    <div class="col-md-12">
      <button type="button"  (click)="addEmptyRow();" class="btn btn-primary mb-2">Add New Row</button></div>
  </div>
  <table class="table table-bordered">
      <thead>
          <td>heading 1</td>
          <td>heading 2</td>
          <td></td>
      </thead>
      <tbody>
            <ng-container formArrayName="aaaaa">
          <tr *ngFor="let item of aaaaa.controls; let i=index" [formGroupName]="i">
            <td>
                    {{dynamicForm.get('aaaaa').value[i].isEditable}}
                    <ng-container *ngIf="dynamicForm.get('aaaaa').value[i].isEditable">
                    <input  type="text" formControlName="name" class="form-control" placeholder="Name">
                </ng-container>
        <span *ngIf="!dynamicForm.get('aaaaa').value[i].isEditable">{{dynamicForm.get('aaaaa').value[i].name}}</span>

               
                   

            </td>
            <td>

                            <input *ngIf="dynamicForm.get('aaaaa').value[i].isEditable" type="text" formControlName="desc" class="form-control" placeholder="Name">
                           
                <span *ngIf="!dynamicForm.get('aaaaa').value[i].isEditable">{{dynamicForm.get('aaaaa').value[i].desc}}</span>


                           
       



            </td>
            <td>
                <button *ngIf="!dynamicForm.get('aaaaa').value[i].isEditable" type="button" (click)="editItem(i)" class="btn btn-primary mb-2">Edit</button>
                 <button *ngIf="!dynamicForm.get('aaaaa').value[i].isEditable" type="button" (click)="removeItem(i)" class="btn btn-primary mb-2">Delete</button> 
                 <button *ngIf="dynamicForm.get('aaaaa').value[i].isEditable" type="button" (click)="updteItem()" class="btn btn-primary mb-2">Update</button> 
                 <button *ngIf="dynamicForm.get('aaaaa').value[i].isEditable" type="button"  (click)="cancelItem()" class="btn btn-primary mb-2">Cancel</button> 

            </td>
          </tr></ng-container>
      </tbody>
  </table>
  
    <div *ngIf="!isHidden" class="row">

        <div class="col-md-4">
            <div class="form-group">
                <input type="text" maxlength="2" formControlName="name1" class="form-control" placeholder="Name">
              </div>
          </div>
          <div class="col-md-4">
              <div class="form-group">
                  <input formControlName="desc1" maxlength="2"  type="text" class="form-control"  placeholder="Details">
                </div>
            </div>
            <div class="col-md-4">
                <button type="button" (click)="save();" class="btn btn-primary mb-2">Save</button>
                <button type="button" (click)="cancelNewItem();" class="btn btn-primary mb-2">Cancel</button>

            </div> 
        </div> 
</form>
</div>

解决方法

问题在于您直接编辑表单控件 isEditable 值的方式。您需要使用 setValue 或 patchValue。

这是一个 updated Stackblitz，其中包含大量修复。