16

我收到此错误：

尚未向此数组注册任何表单控件。如果您使用的是 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在eventSubscription.

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

有任何想法吗？

4

4 回答 4

7

在调用FormGroup 或 FormArray 之前，FormGroup 或FormArraysetValue(data)必须具有与. 只有结构很重要，FormGroup 或 FormArray 中的值将替换为.datadata

例如，如果您的数据是

let data = [ {a: 1, b:2}, {a: 3, b: 4} ]

那么 FormArray 必须有 2 个 FormGroups 并且每个 FormGroup 必须有一个 FieldControl 被调用a和一个被调用b。你可以这样做：

let fa = this.formBuilder.array([
  this.formBuilder.group({a: 0, b:0}),
  this.formBuilder.group({a: 0, b:0})
])
fa.setValue(data)

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

于 2019-09-24T20:49:21.897 回答
2

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

于 2017-03-14T13:20:42.470 回答
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
        //...
    })
}
于 2017-03-14T13:00:18.847 回答
0

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

 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);        
    }
}
于 2017-08-16T07:11:42.667 回答