angular 在编辑中出现反应形式问题的动态控件以及如何更新值

Question

我正在尝试使用反应式表单创建内联动态表单，我能够在 dom 中添加新对象和循环，但是当我按下编辑按钮时，它不起作用并且在控制台中也出现错误。在对象中我有属性 isEditable true or false based on this 属性 textbox is showed or hide 但是当我试图编辑它不工作加上我想知道如何更新对象中的值我什么时候点击更新按钮 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: [""],
      desc1: [""],
    })
  }
   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>

Answer 1

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

这是一个 updated Stackblitz 修复程序。

angular 在编辑中出现反应形式问题的动态控件以及如何更新值

angular dynamic controls with reactive form issues in edit and how can updated the values

crud

dynamicform

angular

angular-reactive-forms