0

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>

1 Answer 1

1

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.

8
  • thanks it works for me can please show me how to add validation for individual row suppose when i edit and hit the update without any value it should show error Feb 14, 2021 at 8:06
  • 1
    I updated the stackblitz with validation for the edit. Look at save() where I create form control with Validators.required. I changed updateItem() to check that the controls are valid before applying change. I also added class is-invalid on the inputs when there's validation errors. Feb 14, 2021 at 8:21
  • great this is what i am looking for.Thanks Feb 14, 2021 at 10:34
  • but when i add new row it's validation are not working properly for example when i click on save validation does not fire when i type then it shows validation error and after saving when i click on add new row again the error are already showing it should show only when i hit save Feb 15, 2021 at 8:22
  • For the add new row, you need to add validation like the edit control. To show the error only after the input is blurred, you can change [class.is-invalid]="item.controls.newName.invalid" to [class.is-invalid]="item.controls.newName.invalid && item.controls.newName.touched". I edited the Stackblitz again. Feb 15, 2021 at 19:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.