Angular 2 - 无法设置表单数组值 [英] Angular 2 - Can't set form array value

问题描述

我收到此错误:

<块引用>

还没有使用此数组注册的表单控件.如果您使用的是 ngModel，您可能需要检查下一个刻度(例如使用 setTimeout).

使用此代码时:

public settingsForm: FormGroup = this.fb.group({合作者:this.fb.array([]),rsvp: this.fb.group({最新日期:[''，[Validators.required]]，最新时间:[''，[Validators.required]]，guestLimit: ['', [Validators.required]],isRSVPOpen: 假，isGuestPlusOne:假，isAutoApproveToGuestlist: 假，isOnlyFacebookRSVP:假，isBirthdayAndPhoneRequired: false}),门票:this.fb.group({信息:this.fb.group({截止日期: ''，关闭时间: ''}),类型:this.fb.array([])})});

在ngOnInit里面:

this.eventSubscription = this.af.database.object('/events/' + this.eventId).filter(event => event['$value'] !== null).subscribe((事件:IEvent) => {常量设置:ISettings = event.settings;const 合作者:ICollaborator[] = settings.collaborators;const rsvp: IRSVP = settings.rsvp;const 票证:ITickets = settings.tickets;this.settingsForm.setValue({合作者:合作者 ||[],rsvp: rsvp,门票:{信息:ticket.info，类型:ticket.types ||[]}});});

当 collaborators 包含一个值时，即它不是 undefined、null 或空的 []，例如:

<预><代码>[{电子邮件:'[e-mail]',角色:1},{电子邮件:'[e-mail]'，角色:2}]

然后应用程序在 eventSubscription 中的 setValue 行崩溃.

我无法弄清楚为什么会发生这种情况.

有什么想法吗?

解决方案

用控件初始化表单数组.这样问题就解决了.如果您需要知道如何操作，请参阅 Reactive Forms 指南那.如果您正在使用 ngModel，可能值得将其删除.

I get this error:

There are no form controls registered with this array yet. If you're using ngModel, you may want to check next tick (e.g. use setTimeout).

When using this code:

public settingsForm: FormGroup = this.fb.group({
  collaborators: this.fb.array([]),
  rsvp: this.fb.group({
    latestDate: ['', [Validators.required]],
    latestTime: ['', [Validators.required]],
    guestLimit: ['', [Validators.required]],
    isRSVPOpen: false,
    isGuestPlusOne: false,
    isAutoApproveToGuestlist: false,
    isOnlyFacebookRSVP: false,
    isBirthdayAndPhoneRequired: false
  }),
  tickets: this.fb.group({
    info: this.fb.group({
      closingDate: '',
      closingTime: ''
    }),
    types: this.fb.array([])
  })
});

Inside ngOnInit:

this.eventSubscription = this.af.database.object('/events/' + this.eventId)
  .filter(event => event['$value'] !== null)
  .subscribe((event: IEvent) => {

    const settings: ISettings = event.settings;
    const collaborators: ICollaborator[] = settings.collaborators;
    const rsvp: IRSVP = settings.rsvp;
    const tickets: ITickets = settings.tickets;

    this.settingsForm.setValue({
      collaborators: collaborators || [],
      rsvp: rsvp,
      tickets: {
        info: tickets.info,
        types: tickets.types || []
      }
    });
  }
);

When collaborators contains a value, i.e it's not undefined, null or empty [], something like:

[
  {
    email: '[e-mail]',
    role: 1
  },
  {
    email: '[e-mail]',
    role: 2
  }
]

Then the app crashes on the setValue line in the eventSubscription.

I cannot figure out why this is happening.

Any ideas?

解决方案

Initialize the form array with the control. That would resolve the issue. See Reactive Forms guide if you need to know how to do that. If you are using ngModel it would probably worth to remove it.

这篇关于Angular 2 - 无法设置表单数组值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！