Question

我收到此错误：

此阵列尚未注册表单控件。如果您正在使用ngModel，则可能需要检查下一个刻度（例如，使用setTimeout）。

使用此代码时：

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([])
  })
});

内部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 || []
      }
    });
  }
);

collaborators包含值时，即不是undefined，null或空[]，如下所示：

[
  {
    email: 'foo@bar.com',
    role: 1
  },
  {
    email: 'baz@bar.com',
    role: 2
  }
]

然后，该应用在setValue的{{1}}行崩溃了。

我无法弄清楚为什么会这样。

有什么想法吗？

Answer 1

在设置其值之前，您必须构建表单OnInit。尝试这样的事情：

settingsForm: FormGroup; 

buildForm(): void {
   settingsForm: FormGroup = this.fb.group({
      //content of settingsForm
   })
}

ngOnInit() {
    this.buildForm();
    this.eventSubscription = this.af.database.object('/events/' + this.eventId)
    //...
    this.settingsForm.setValue({ //you can try .patchValue to set only available value
        //...
    })
}

Answer 2

使用控件初始化表单数组。这将解决问题。如果您需要知道如何操作，请参阅Reactive Forms指南。如果您使用的是ngModel，则可能需要删除它。

Answer 3

在FormGroup或FormArray上调用Notification之前，FormGroup或FormArray必须具有与setValue(data)完全相同的结构。只有结构很重要，FormGroup或FormArray中的值将被data替换。

例如，如果您的数据是

data

然后，FormArray必须具有2个FormGroup，并且每个FormGroup必须具有一个称为let data = [ {a: 1, b:2}, {a: 3, b: 4} ]的FieldControl和一个称为a的FieldControl。您可以执行以下操作：

如果您的数据具有更复杂的结构，则FormArray需要具有相同的复杂结构。

Answer 4

我认为这段代码会有所帮助

 import { FormArray, FormBuilder, FormGroup} from '@angular/forms';

export class SomeComponent implements OnInit {

consutructor(public  fb:FormBuilder) { }

    public buildcollaboratorsGroup(fb:FormBuilder):FormGroup {
        return fb.group({
                            email:'',
                            role:''
                });
    }

ngOnInit() {
    public settingsForm: FormGroup = this.fb.group({
    collaborators:this.fb.array([this.buildcollaboratorsGroup(this.fb)])
    });     

    this.setFormArrayValue();
 }


    // I am trying set only one value if it's multiple use foreach        
    public setFormArrayValue() {
        const controlArray = <FormArray> this.settingsForm.get('collaborators');
        controlArray.controls[0].get('email').setValue('yourEmailId@gmail.com');
        controlArray.controls[0].get('role').setValue(2);
    }

    // I am trying remove only one value if it's multiple use foreach        
    public removeFormArrayValue() {
        const controlArray = <FormArray> this.settingsForm.get('collaborators');
           controlArray.removeAt(0);        
    }
}

Angular 2 - 无法设置表单数组值

4 个答案: