Angular How to patch value in the form array

Question

I am using Angular8 and reactive forms. My ngOnInit is:

ngOnInit(): void {
  this.makeForm = this.fb.group(
    year: ['', Validators.required],
    amount: ['', Validators.required],
    desc: ['', Validators.required],
    details: new FormArray([
      this.det(),
    ]
  );
}

det() {
  return new FormGroup({
    for: new FormControl(''),
    remarks: new FormControl('')
  });
}

I have the data from the backend to patch the array:

 {
  "amount": 9000,
  "year": 1996,
  "id": 1,
  "desc": "P1",
  "details": [
    {
      "id": 1,
      "remarks": "ok",
      "for": "1"
    },
    {
      "id": 24,
      "remarks": "OK",
      "for": "1"
    },
    {
      "id": 25,
      "remarks": "OK",
      "for": "1"
    }
  ]
 }

I commonly patch the values with this method:

getppredit() {
  let data:any = this.shareService.ParentShare.value;
  let id = data.id;
  this.dataService.getdataEdit(id)
    .subscribe((result: any) => {
      let no = result.no;
      let year = result.year;
      this.makeForm.patchValue({
        no: no,
        year: year
      });
  });
}

The above code is used for normal patch, but how to patch the value inside of an array dynamically using Angular8's reactive forms?

Guerrilla · Accepted Answer · 2022-05-16 02:14:09Z

3

Try this one here

    getppredit(){
      let data:any = this.shareService.ParentShare.value
      let id = data.id 
      this.dataService.getdataEdit(id)
        .subscribe((result: any)  => {
          let no = result.no;
          let year= result.year
          this.makeForm.patchValue({
              no     : no,
              year: year
              })

          //initialize empty array
          this.getFormArray() = new FormArray([]);

          //create needed formGroups and inside each formGroup all formControls
          for (let detail of result.details) {
            
            let idControl: FormControl = new FormControl('');
            let requestForControl: FormControl = new FormControl('');
            let remarkControl: FormControl = new FormControl('');

            idControl.setValue(detail.id);
            ForControl.setValue(detail.requestFor);
            remarkControl.setValue(detail.remark);

            this.getFormArray().push(new FormGroup({
              id: idControl,
              For: requestForControl,
              remark: remarkControl}));
           }

        })//end of subscribe
     
     }
    
        getFormArray(): FormArray{
            return this.makeForm.get('details') as FormArray;
          }

Form Arrays are usually intended to have dynamic data. Therefore you must first create your dynamic form controls inside the form array (after you have received your response) and then put values inside.

edited May 16, 2022 at 2:14

Guerrilla

15.1k39 gold badges126 silver badges242 bronze badges

answered Dec 14, 2020 at 16:42

Panagiotis Bougioukos

19.6k4 gold badges41 silver badges63 bronze badges

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

6 Comments

Gem Over a year ago

How to detect the valuechanges in this requestfor?

Gem Over a year ago

How to push to the existance array @Panagiwths Mpougioukos

ChumiestBucket Over a year ago

@Madhav the existing array can be pushed to using array.push(). See my answer above

Panagiotis Bougioukos Over a year ago

@Madhav you use this method that I have in my answer getFormArray() to get a reference to your existent array and then you use push to push a new element

Panagiotis Bougioukos Over a year ago

@Madhav You can use if you want getFormArray().push(dat()) to use your dat() however the form that you will push will have empty values and not the values from the json response. If you want to have those values you must see what I have done in the answer

|

ChumiestBucket · Accepted Answer · 2020-12-14 17:30:42Z

2

here's how i would do it using FormArray, which tracks the value and validity state of an array of FormControl, FormGroup or FormArray instances:

export class Component implements OnInit {

  // initialize the FormArray with an empty array!
  formArray: FormArray = new FormArray([]);
  makeForm: FormGroup;

  ngOnInit() {
    this.makeForm = this.fb.group({
      no: ['', Validators.required],
      year: ['', Validators.required],
    });
  }

  getParEdit() {
    ...
    this.dataService.getDataEdit(id).subscribe(result => {
      const { no, year, details } = result;
      this.makeForm.patchValue({ no, year });

      if (details.length) {
        details.forEach(detail => {
          this.formArray.push(
            this.fb.group({
              id: new FormControl({ value: detail.id }),
              requestFor: new FormControl({ value: detail.requestFor }),
              remark: new FormControl({ value: detail.remark }),
            });
          );
        });
      }
    });
  }
}

you can dynamically create the FormGroup for each detail iteration, as well as the FormControls in each.

answered Dec 14, 2020 at 17:30

ChumiestBucket

1,0658 gold badges30 silver badges52 bronze badges

4 Comments

Gem Over a year ago

How to push value in this array? det(){ return new FormGroup({ requestfor : new FormControl(''), remarks : new FormControl(''), // file_id : new FormControl(''), })}

Gem Over a year ago

how to push value in exist array

ChumiestBucket Over a year ago

@Madhav Not sure what you're trying to ask. That is not an array, that is a FormGroup. The example I provided above shows how to push a FormGroup into a FormArray.

Gem Over a year ago

ya I understand now and thanks man and I learned from this

Collectives™ on Stack Overflow

Angular How to patch value in the form array

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related