javascript - Angular 5不显示用户从formarray输入的值

Question

在 Angular 5 中，我尝试添加新行和删除行功能。为了添加新行和删除行，我从 here 获取了代码。一切工作正常，但是当我尝试让用户在新行字段中输入值时，我没有得到这些值。 我正在获取事件名称的值。但对于其他 3 个字段，如套餐名称、套餐价格、最大购买限额，我没有得到它们。 这是我尝试过的代码。

我的 event-create.component.html 看起来像这样

<div class="container col-md-12">
  <h1 class="page-header">Create Event</h1>
  <div class="row show-hide-message">
    <div [ngClass]= "messageClass">{{message}}</div>
  </div>
  <form [formGroup] = "form" (ngSubmit)="onEventSubmit()">
  <fieldset>
    <div class="form-group">
      <label for="eventname">Event Name</label>
      <div class='form-group' [ngClass]="{'has-error': form.controls.eventname.errors && form.controls.eventname.dirty, 
  'has-success': !form.controls.eventname.errors
}">
        <input type="text" class="form-control" autocomplete="off" placeholder="Event Name" formControlName="eventname">
        <ul class="help-block">
          <li *ngIf="(form.controls.eventname.errors?.minlength ) && form.controls.eventname.dirty">Event name should be atleast 5 characters</li>
        </ul>
      </div>
    </div>


    <h4>Package Price</h4>
    <hr>
    <div class="row" formArrayName="sections">
      <div class="col-md-12" *ngFor="let section of getSections(form); let i = index">
        <div class="form-group col-md-5">
          <label for="packagename">Package Name</label>
          <input type="text" class="form-control" autocomplete="off" placeholder="Package Name" formControlName="packagename" >
       </div>
        <div class="form-group col-md-2">
          <label for="packageprice">Package Price</label>
          <input type="number" class="form-control" autocomplete="off" placeholder="Package Price" formControlName="packageprice" >
        </div>
        <div class="form-group col-md-2">
          <label for="packagelimit">Max Purchase Limit</label>
          <input type="number" class="form-control" formControlName="packagelimit" autocomplete="off" >
        </div>
        <div class="form-group col-md-1">
          <br/>
          <input type="button" (click)="addPackageRow()" class="btn btn-md btn-success" value="+" name="">
        </div>
        <div class="form-group col-md-1" *ngIf="getSections(form).length > 1">
          <br/>
          <input type="button" (click)="removeSection(i)" class="btn btn-md btn-error" value="-" name="">
        </div>
      </div>
    </div>

    <input [disabled]=!form.valid type="submit" class="btn btn-primary" value="Submit">

    <pre>{{form.value | json}}</pre>

  </fieldset>
</form>
</div>

我的 event-create.component.ts 看起来像这样

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { FormControlName } from '@angular/forms/src/directives/reactive_directives/form_control_name';


@Component({
  selector: 'app-event-create',
  templateUrl: './event-create.component.html',
  styleUrls: ['./event-create.component.css']
})
export class EventCreateComponent implements OnInit {

  form :  FormGroup;
  packagesArray: FormArray;


  constructor(
    private formBuilder : FormBuilder,
    ) { this.createEventForm() }

  createEventForm() {
    this.form = this.formBuilder.group({
      eventname: ['', Validators.compose([
        Validators.required,
        Validators.minLength(5)
      ])],
      packages: this.packagesArray
    })
  }

  ngOnInit() {
    this.form = new FormGroup({
      eventname: new FormControl(''),
      sections: new FormArray([
        this.initSection(),
      ]),
    });
  }

  initSection() {
    return new FormGroup({
      packagename: new FormControl(''),
      packageprice: new FormControl(''),
      packagelimit: new FormControl('')
    });
  }

  initItemRows() {
        return this.formBuilder.group({
            itemname: ['']
        });
    }

  onEventSubmit() {}

  public addPackageRow() {
    const control = <FormArray>this.form.get('sections');
    control.push(this.initSection());
  }

  initOptions() {
    return new FormGroup({
      optionTitle: new FormControl('')
    });
  }

  addSection() {
    const control = <FormArray>this.form.get('sections');
    control.push(this.initSection());
  }

  getSections(form) {
    return form.controls.sections.controls;
  }

  public removeSection(i){
   const control = <FormArray>this.form.get('sections');
   control.removeAt(i);
  }

}

它不显示用户在 html 页面中输入的值，也不对事件名称字段进行任何验证。

这是我到目前为止所做的演示

https://stackblitz.com/edit/angular-3s5wwf

有人可以告诉我这里出了什么问题吗？任何建议或意见都将非常感激。谢谢。

Answer 1

您需要在第 23 和 24 行添加此内容

<div class="row" formArrayName="sections">
  <div class="col-md-12" *ngFor="let section of getSections(form); let i = index" [formGroupName]="i">

you missed adding the formGroupName for the formArrayName

workinglink