javascript - 我如何显示 GroupLists 的 FormArray？

Question

我正在尝试制作一个交互式表单，在每一行上列出一个项目和一个删除按钮(在我的示例中称为 verwijderen)。这些项目是从数据库中检索出来的，每个项目都被实例化为一个名为 LaborPeriod 的自定义对象。

然后将这些对象转换为 FormGroup 对象，然后添加到 FormArray 中。该表单组的定义如下:

  let formGroup = this.fb.group({
    id: this.account.laborperiods[i].id,
    beginDate: this.account.laborperiods[i].beginDate,
    endDate: this.account.laborperiods[i].endDate,
    hours: this.account.laborperiods[i].hours,
    account: this.account.laborperiods[i].account
  })
  if(!this.laborPeriodArray){
    this.laborPeriodArray = new FormArray([])
  }
  this.laborPeriodArray.push(formGroup)
}

在主FormGroup中定义的laborPeriodArray也是laborPeriodArray。主 FormGroup 如下所示:

  constructor(private fb: FormBuilder,
              private route: ActivatedRoute,
              private router: Router,
              private accountService: AccountService) {
    this.title = "Account aanpassen";
    //console.log(this.account.enabled + " : " + this.account.role)
    this.accountUpdateForm = this.fb.group({
      name: [''],
      username: ['', [Validators.required, Validators.email]],
      status: '',
      permission:'',
      laborPeriodArray:this.fb.array([])
    });
  }

整个组件看起来是这样的:在这里你可以看到 laborPeriodArray 在 onInit 方法中被初始化。

  constructor(private fb: FormBuilder,
              private route: ActivatedRoute,
              private router: Router,
              private accountService: AccountService) {
    this.title = "Account aanpassen";
    //console.log(this.account.enabled + " : " + this.account.role)
    this.accountUpdateForm = this.fb.group({
      name: [''],
      username: ['', [Validators.required, Validators.email]],
      status: '',
      permission:'',
      laborPeriodArray:this.fb.array([])
    });
  }

  ngOnInit(): void {
    let formGroupArray: FormGroup[] = [];
    this.route.paramMap
      .switchMap((params: ParamMap) =>
        this.accountService.getAccount(params.get("id")))
      .subscribe(account => {
        this.account = account;
        for(let i=0; i < account.laborperiods.length; i++){
          let formGroup = this.fb.group({
            id: this.account.laborperiods[i].id,
            beginDate: this.account.laborperiods[i].beginDate,
            endDate: this.account.laborperiods[i].endDate,
            hours: this.account.laborperiods[i].hours,
            account: this.account.laborperiods[i].account
          })
          if(!this.laborPeriodArray){
            this.laborPeriodArray = new FormArray([])
          }
          this.laborPeriodArray.push(formGroup)
        }
        console.log("laborPeriod" + JSON.stringify(this.laborPeriodArray.length))

        this.ngOnChanges();
      });
  }

  ngOnChanges(): void {
    if (this.account !== undefined) {
      this.accountUpdateForm.reset({
        name: this.account.name,
        username: this.account.username,
        status: this.account.enabled,
        permission: this.account.admin,
        laborPeriodArray: this.laborPeriodArray
      });
    }
  }

添加了所有 FormGroup 项目但未显示。行是空白的。这是我的 HTML 页面中的相关片段

<table class="table table-hover">
      <thead>
      <tr>
        <th>Begin datum</th>
        <th>Eind datum</th>
        <th>Aantal uren</th>
        <th>Actie</th>
      </tr>
      </thead>
      <tbody>
      <tr formArrayName="laborPeriodArray" *ngFor = "let laborperiod of laborPeriodArray.controls; let i = index" [formGroupName]="i">
        <td formControlName="beginDate">{{laborperiod.value.get('beginDate') | date:'yyyy-MM-dd'}}</td>
        <td formControlName="endDate">{{laborperiod.value.get('endDate') | date:'yyyy-MM-dd'}}</td>
        <td formControlName="hours">{{laborperiod.value.get('hours')}}</td>
        <button type="button" class="btn btn-default">
          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
          Verwijderen
        </button>
      </tr>

这给我浏览器错误 ERROR Error: Cannot find control with unspecified name attribute 但我为每个 td 行指定了 formControlName。所以我不明白是什么导致了错误。此外，我还想知道如何将“删除”按钮链接到与每一行对应的数据。我认为我必须为此使用索引 I，但我不确定。

编辑:

应用 AJT_82 的解决方案后，我仍然无法使用它。它似乎与数据库检索数据本身有关。当我像这样将 AJT_82 的示例帐户数组添加到我的 ngOnInit() 时:

  account1 = { laborperiods: [{ id: 1, hours:11 }, { id: 2, hours:22 }, { id: 3, hours:33 }] }

  ngOnInit(): void {
    this.route.paramMap
      .switchMap((params: ParamMap) =>
        this.accountService.getAccount(params.get("id")))
      .subscribe(account => {
        this.account = account;
        for(let i=0; i < account.laborperiods.length; i++){
          let formGroup = this.fb.group({
            id: this.account1.laborperiods[i].id,
            beginDate: this.account.laborperiods[i].beginDate,
            endDate: this.account.laborperiods[i].endDate,
            hours: this.account1.laborperiods[i].hours,
            account: this.account.laborperiods[i].account
          })
          this.laborPeriodArray.push(formGroup)
        }
        console.log(JSON.stringify(account.laborperiods[0].beginDate))
        this.ngOnChanges();
      });
  }

它有效，但它只显示 3 行。这是示例帐户数组的总长度。

这是帐户类:

export class Account {
  id: number;
  username: string;
  name: string;
  enabled: boolean
  password: string;
  person: Person;
  admin: boolean;
  laborperiods: LaborPeriod[]
  remainingLeaveHours:number;
}

这是 LaborPeriod 类:

export class LaborPeriod{
    id: number
    beginDate: Date
    endDate: Date
    hours: number
    account: Account
}

它的字段声明有什么问题吗？

Answer 1

您不能在与迭代和 formGroupName 相同的元素上使用 formArrayName，您需要将 formArrayName 移至上层。我也没有看到 formControlName 的使用，因为这些不是可编辑的字段，Angular 会为此抛出错误。还使用例如...

{{laborperiod.value.get('beginDate') | date:'yyyy-MM-dd'}}

不正确，应该是

{{laborperiod.value.beginDate | date:'yyyy-MM-dd'}}

假设在您的代码中声明了变量 laberPeriodArray...

this.laborPeriodArray = 
     this.accountUpdateForm.controls.laborPeriodArray as FormArray

由于您在代码中引用了 this.laborPeriodArray，因此如下:

if(!this.laborPeriodArray){
  this.laborPeriodArray = new FormArray([])
}

是多余的，您已经在表单的构建中将其声明为空的 FormArray。但这只是旁注:)

总而言之，您的模板应如下所示:

<table formArrayName="laborPeriodArray" >
  <tr *ngFor="let laborperiod of laborPeriodArray.controls; 
      let i = index" [formGroupName]="i">
    <td>{{laborperiod.value.hours}}</td>
  </tr>
</table>

DEMO