Angular How to get value in form array?

Question

I want to get 'onduty' values from all form array's instance. I tried this in html:

<span *ngFor="let day of workDayandTime.controls;let i= index;">
 {{day.onduty}}
</span>

but I couldn't get any value.

this is workDayandTime's value in json : workDayandTime form array

Form :

class employerShortForm extends FormGroup {
    constructor(fb: FormBuilder) {
        super({
            employer: fb.group({
                name: new FormControl('',Validators.required),
            }),
            employee: fb.group({
                name: new FormControl('', Validators.required)
            }),
            contractStart: new FormControl(''),
            contractEnd: new FormControl(''),
            workAddress: new FormControl('', Validators.required),
            work: new FormControl('', Validators.required),
            workDayandTime: fb.array([]),
            wageType: new FormControl(''),
            wage: new FormControl(''),
            bonus: new FormControl(''),
            otherWage: fb.array([]),
            otherwageRadio: new FormControl(''),
            overTimeAddRate: new FormControl(''),
            payDateType: new FormControl(''),
            payDate: new FormControl(''),
            payMethod: new FormControl(''),
            insurance1: new FormControl(''),
            insurance2: new FormControl(''),
            insurance3: new FormControl(''),
            insurance4: new FormControl(''),
            company: fb.group({
                name: new FormControl('', Validators.required),
                phone: new FormControl('', Validators.required),
                address: new FormControl('', Validators.required),
            }),
            ownerName: new FormControl('', Validators.required),
            employeeEmail: new FormControl('', Validators.required),
        });
    }

}

short-time-paper.ts

import { employerShortForm, employeeContForm, DataHandling, otherWage, workDayandTime} from '../../../contract-form'
import { FormGroup, FormControl, FormBuilder, FormArray } from '@angular/forms';
import { Component, AfterViewInit, ElementRef, Renderer2, ViewChild } from '@angular/core';
import { IonicPage, ViewController, ModalController, NavParams, Alert, NavController, Checkbox, Platform } from 'ionic-angular';

@Component({
  selector: 'app-short-time-paper',
  templateUrl: 'short-time-paper.html',
})
export class ShortTimePaperComponent implements AfterViewInit{
  public employerForm: employerShortForm = new employerShortForm(this.fb);
  ngAfterViewInit() {
    this.addworkDayandTime();
  }
get workDayandTime(): FormArray{
    return this.employerForm.get('workDayandTime') as FormArray;
  }
  
  public addworkDayandTime() {
    for (let i = 0; i < 7; i++) {
      this.workDayandTime.push(this.fb.group(new workDayandTime()));
    }
  }
}

short-time-paper.html

    <form [formGroup]="employerForm">
          <span *ngFor="let day of workDayandTime.controls;let i= index;">
            {{day.onduty}}
            <span *ngIf="day.onduty=='false'">{{getDays(i)}},&nbsp;</span>
          </span>
    </form>

I dropped other code but about formarray, What I wanna know is How can I get each instance's 'onduty' value in array. Sorry for my short of Eng. But if you help to solve this problem. It'll be big pleasure for me. thanks.

get values by workDayandTime() which is get function. So When I enter values into form, I can get values — Sobright
– Sobright, Commented Jul 24, 2018 at 4:26
get workDayandTime(): FormArray{ return this.employerForm.get('workDayandTime') as FormArray; } — Sobright
– Sobright, Commented Jul 24, 2018 at 4:27
And check this please. this is form values in json : i.sstatic.net/7m1Qb.jpg — Sobright
– Sobright, Commented Jul 24, 2018 at 4:29

Sobright · Accepted Answer · 2018-07-24 04:52:50Z

6

I solved this,

in HTML :

<span *ngFor="let day of workDayandTime.controls;let i= index;">
  {{ day.controls.onduty.value }}
</span>

this is form array's structure : Structure

It's quite complicated : <

answered Jul 24, 2018 at 4:52

Sobright

2412 gold badges3 silver badges9 bronze badges

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

Comments

Rahul Dapke · Accepted Answer · 2018-07-24 03:43:28Z

1

Just use workDayandTime instead of workDayandTime.controls. It will work :

    <form [formGroup]="employerForm">
          <span *ngFor="let day of workDayandTime;let i= index;">
            {{day.onduty}}
            <span *ngIf="day.onduty=='false'">{{getDays(i)}},&nbsp;</span>
          </span>
    </form>

answered Jul 24, 2018 at 3:43

Rahul Dapke

3556 silver badges19 bronze badges

1 Comment

Sobright Over a year ago

ERROR Error: Uncaught (in promise): Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

João Marcos Santos Teixeira · Accepted Answer · 2019-12-12 19:02:23Z

1

the code above worked for me. follow other exemple.

 <div *ngFor="let rules of condition['controls'].filters['controls']; let conditionIndex = index" class="row">{{rules.controls.formId.value }}</div>

answered Dec 12, 2019 at 19:02

João Marcos Santos Teixeira

5654 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angular How to get value in form array?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related