Как нажать на FormArray без FormBuilder на угловой 2

у меня есть массив форм, мне трудно решить это.

Это мой текущий код

.ТС

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>

мне трудно заселить, а также нажать. Я не могу найти учебник.

редактировать

Я хочу что-то вроде этого на submit

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

1 ответов

так как вы хотите, чтобы шаги выглядели так на submit:

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

вы не должны использовать formGroup внутри шагов.

сборка формы должна выглядеть так:

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:

это будет путь ваш addProcedure будет выглядеть так:

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

и ваш шаблон будет выглядеть так:

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

демо

оригинальный ответ с решение как сделать FormArray:

addProcedure должен выглядеть так:

  addProcedure (e): void {
    const steps = <FormArray>this.item.controls['steps'];
    steps.push(new FormControl())
  }

и ваш шаблон для formarray должен выглядеть примерно так:

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