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>
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.