Search code examples
angularcrudangular-reactive-formsdynamicform

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


I am trying to created inline dynamic form with reactive forms i am able to add new object and loop in dom but when i have pressed the edit button it's not working and also getting error in console. In object i have property isEditable true or false based on this property textbox is shown or hide but when i am trying to edit it's not working plus i would like to know how i can updated the value in object when i will hit updated button 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>


Solution

  • The problem is the way you directly edit the form control isEditable value. You need to use setValue or patchValue.

    Here's an updated Stackblitz with a bunch of fix.