How to push on FormArray without FormBuilder on Angular 2

Question

I have form array, I am having hard time solving this.

this is my current code

.ts

ngOnInit() {
    this.item = this.fb.group({
      codeId: ['', Validators.pattern(/^\d+$/)],
      name: ['', [Validators.required, Validators.minLength(3)]],
      stepTextarea: ['', []],
      steps: [this.fb.array([]), []]
    });
}
addProcedure (e): void {
    e.preventDefault();
    const control = <FormGroup>this.item;
    const steps = <FormArray>this.item.controls['steps'];

    steps.push(control.get('stepTextarea').value);
    control.get('stepTextarea').setValue("", {onlySelf: true})
  }

onSubmit({value, valid}: {value: Item, valid: boolean}): void {
    const control = <FormGroup>this.item;
    console.log(value);
}

.html

<ol ngFor [ngForOf]="item.get('steps').controls">
  <span [formGroupName]="i">{{i}}</span>
</ol>

I am having hard time how to populate and also push. I cant find any tutorial.

EDIT

I want something like this on submit

{
    codeId: 123,
    name: "wew",
    stepTextarea: "",
    steps: ['asdjlkas','12312','12321']
}

AVJT82 · Accepted Answer · 2019-11-11 19:33:27Z

20

Since you want the steps to look like this on submit:

steps: ['asdjlkas','12312','12321']

you shouldn't use formGroup inside steps.

The build of the form should look like this:

ngOnInit() {
    this.item = this.fb.group({
      codeId: ['', Validators.pattern(/^\d+$/)],
      name: ['', [Validators.required, Validators.minLength(3)]],
      stepTextarea: [''],
      steps: this.fb.array([]) // do not enclose steps inside an array
    });
}

EDIT:

This would be the way your addProcedure would look like:

addStep() {
  const control = <FormArray>this.item.get('steps');
  // push the value from stepTextArea to array
  control.push(this.fb.control(this.item.get('stepTextArea').value))
  // reset
  this.item.get('stepTextArea').reset()
}

And your template would look like this:

<div formArrayName="steps">
<h3>Steps: </h3>
<ol *ngFor="let step of item.get('steps').controls; index as i"> 
   <span>{{step.value}}</span>
</ol>

Original answer with solution of how to do FormArray:

addProcedure should look like this:

  addProcedure (e): void {
    const steps = <FormArray>this.item.get('steps');
    steps.push(this.fb.control())
  }

And your template for formarray should look something like this:

<div formArrayName="steps">
  <div *ngFor="let step of item.controls.steps.controls; let i = index" >
      <label>Step {{i+1}} </label>
      <input [formControlName]="i" />
  </div>
</div>

edited Nov 11, 2019 at 19:33

answered May 8, 2017 at 7:15

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

7 Comments

Storm Spirit Over a year ago

anyway to view directly on my template? this is my current and it shows empty.

<ol formArrayName="steps" class="list-group" dnd-sortable-container [sortableData]="steps">                     <li *ngFor="let step of item.controls.steps.controls; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">                         {{step[i]}}                     </li>                   </ol>

AVJT82 Over a year ago

I believe... {{step[i]}} should be just {{i}}

Storm Spirit Over a year ago

it shows index on mine, not the content. and when I try {{step}}, it returned [Object object]

AVJT82 Over a year ago

Well hmm... looking closer at the code, what do you expect the value should be, since you have no input field... so it wouldn't even get a value? and apparently you are using some 3rd party tool?

Storm Spirit Over a year ago

i have input field, look on my addProcedure, it will get the stepTextarea value to insert on steps array when the addProcedure button is clicked.

|

Collectives™ on Stack Overflow

How to push on FormArray without FormBuilder on Angular 2

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related