Getting pre-populated data from reactive form in angular

Question

I was trying to get the data from a reactive form, the data here is pre-populated in the html like this:-

        <form [formGroup]="editForm"  (ngSubmit)="saveHandler()">
          <div *ngFor = "let dataItem of dataItems">
            <input type="text" value="{{dataItem.id}}" formControlName="id" placeholder="id">
            <strong>Name: </strong>
             <input type="text" value="{{dataItem.employee_name}}" formControlName="employee_name" placeholder="name">
            <strong>Salary :</strong>
            <input type="text" value="{{dataItem.employee_salary}}" formControlName="employee_salary" placeholder="salary">
            <strong>Age :</strong>
            <input type="text" value="{{dataItem.employee_age}}" formControlName="employee_age" placeholder="age">
            <button type="submit">Submit</button>
          </div>
        </form>

In this code snippet the dataItem is an JSON array from the components with the following fields, now I wanted to pass the data of this form back to the component, I cannot use the value directly from the component that is out of my scenario. Here is the dataItem:

this.dataItems   = [{
      "id":"1",
      "employee_name":"bappi gillu",
      "employee_salary":"2147483647",
      "employee_age":"9876443"
      }];

For the reactive form this is the code in the component file:

this.editForm = new FormGroup({
      id : new FormControl(null),
      employee_name : new FormControl(null), 
      employee_salary : new FormControl(null),
      employee_age : new FormControl(null),
    });

and here is the ngSubmit's saveHandler() :

public saveHandler(  ){
  const employee = this.editForm.value  ;
  console.log(employee );
}

I am getting null If the form has the css class ng-untouched although if the css class is ng-touched the value is coming perfectly. Now what I wanted is to submit the data irrespective of the class. Here also is a link for the stackblitz

Note: The value for the dataItem is coming from an api for this question I had put it this way.

Adrita Sharma · Accepted Answer · 2019-12-06 11:12:06Z

1

Since dataItems is an array, you can use formArray

Try like this:

Working Demo

.html

<form [formGroup]="editForm" (ngSubmit)="saveHandler()">
    <div formArrayName="dataItems" *ngFor="let emp of editForm.get('dataItems').controls; let i = index">
        <div [formGroupName]="i">
            <hr *ngIf="i>0">
            <input type="text"  formControlName="id" placeholder="id">
            <strong>Name: </strong>
            <input type="text"  formControlName="employee_name" placeholder="name">
            <strong>Salary :</strong>
            <input type="text"  formControlName="employee_salary" placeholder="salary">
            <strong>Age :</strong>
            <input type="text" formControlName="employee_age" placeholder="age">
            <button type="submit">Submit</button>
        </div>
    </div>
</form>

.ts

    this.dataItems = [
      {
        id: "1",
        employee_name: "bappi gillu",
        employee_salary: "2147483647",
        employee_age: "9876443"
      }
    ];
    this.editForm = new FormGroup({
      dataItems: this.fb.array([])
    });
    this.editForm.setControl( "dataItems", this.setExistingDataitems(this.dataItems) );
  }

  setExistingDataitems(Dataitemsets): FormArray {
    const formArray = new FormArray([]);
    Dataitemsets.forEach(s => {
      formArray.push(
        this.fb.group({
          id: s.id,
          employee_name: s.employee_name,
          employee_salary: s.employee_salary,
          employee_age: s.employee_age
        })
      );
    });

    return formArray;
  }

answered Dec 6, 2019 at 11:12

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abhishek Over a year ago

Hey kindly check the working demo in this even though my form is valid the button is disabled.

Adrita Sharma Over a year ago

value="{{dataItem.ProductID}}" --> this won't work. You have to set value in the form

Saurabh Yadav · Accepted Answer · 2019-12-06 11:10:07Z

0

You can set directly default value in reactive form like:

  this.editForm = new FormGroup({
      id : new FormControl(1),
      employee_name : new FormControl("bappi gillu"), 
      employee_salary : new FormControl("2147483647"),
      employee_age : new FormControl("9876443"),
    });

Now when you submit the form all field value will present in form object

Or you can use setValue method to update the reactive form

this.dataItems   = [{
      "id":"1",
      "employee_name":"bappi gillu",
      "employee_salary":"2147483647",
      "employee_age":"9876443"
      }];

this.updateValues(this.dataItems[0]);

updateValues({id, employee_name, employee_salary, employee_age}: any) {
  this.editForm.setValue({
      id : id, 
      employee_name: employee_name,
      employee_salary : employee_salary,
      employee_age : employee_age
  });
}

edited Dec 6, 2019 at 11:10

answered Dec 6, 2019 at 10:56

Saurabh Yadav

3,3861 gold badge12 silver badges21 bronze badges

1 Comment

Abhishek Over a year ago

Oh sorry I forgot to mention this dataItem is coming from an api for this question I had put it this way. Thanks for notifying.

Collectives™ on Stack Overflow

Getting pre-populated data from reactive form in angular

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related