Angular 2. 如何在 Reactive Forms 中为控件使用对象数组 [英] Angular 2. How to use array of objects for controls in Reactive Forms

问题描述

我需要为表单动态创建textarea.我有以下模型:

this.fields = {是必需的:真，类型: {选项: [{标签:'选项1'，值:'1'},{标签:'选项2'，值:'2'}]}};

和形式:

this.userForm = this.fb.group({isRequired: [this.fields.isRequired, Validators.required],//... 这里有很多其他控件类型:this.fb.group({选项:this.fb.array(this.fields.type.options),})});

模板的一部分:

<div formArrayName=选项"><div *ngFor="让 userForm.controls.type.controls.options.controls 的选项;让 i=index"><textarea [formControlName]=i"></textarea>

因此，如您所见，我有一个对象数组，我想使用 label 属性将其显示在 textarea 中.现在我看到 [object Object].如果我将 options 更改为一个简单的字符串数组，例如:['Option 1', 'Option 2']，则一切正常.但我需要使用对象.所以，而不是:

我试过了:

但是，它不起作用.
如何使用对象数组?

这是Plunkr

解决方案

您需要添加一个 FormGroup，其中包含您的 label 和 value.这也意味着表单创建的对象与您的 fields 对象具有相同的构建.

ngOnInit() {//构建表单this.userForm = this.fb.group({类型:this.fb.group({options: this.fb.array([])//创建空表单数组})});//修补对象中的值this.patch();}

之后，我们使用 OnInit 中调用的方法修补该值:

patch() {const control = <FormArray>this.userForm.get('type.options');this.fields.type.options.forEach(x => {control.push(this.patchValues(x.label, x.value))});}//赋值补丁值(标签，值){返回 this.fb.group({标签:[标签]，价值:[价值]})}

最后，这是一个

演示

I need to dynamic create textarea for forms. I have the following model:

this.fields = {
      isRequired: true,
      type: {
        options: [
          {
            label: 'Option 1',
            value: '1'
          },
          {
            label: 'Option 2',
            value: '2'
          }
        ]
      }
    };

And form:

this.userForm = this.fb.group({
      isRequired: [this.fields.isRequired, Validators.required],
      //... here a lot of other controls
      type: this.fb.group({
         options: this.fb.array(this.fields.type.options),
      })
});

Part of template:

<div formGroupName="type">
       <div formArrayName="options">
         <div *ngFor="let option of userForm.controls.type.controls.options.controls; let i=index">
            <textarea [formControlName]="i"></textarea>
         </div>
      </div>
</div>

So, as you can see I have an array of objects and I want to use label property to show it in a textarea. Now I see [object Object]. If I change options to a simple string array, like: ['Option 1', 'Option 2'], then all works fine. But I need to use objects. So, instead of:

<textarea [formControlName]="i"></textarea>

I have tried:

<textarea [formControlName]="option[i].label"></textarea>

But, it doesn't work.
How can I use an array of objects?

This is Plunkr

解决方案

You need to add a FormGroup, which contains your label and value. This also means that the object created by the form, is of the same build as your fields object.

ngOnInit() {
  // build form
  this.userForm = this.fb.group({
    type: this.fb.group({
      options: this.fb.array([]) // create empty form array   
    })
  });

  // patch the values from your object
  this.patch();
}

After that we patch the value with the method called in your OnInit:

patch() {
  const control = <FormArray>this.userForm.get('type.options');
  this.fields.type.options.forEach(x => {
    control.push(this.patchValues(x.label, x.value))
  });
}

// assign the values
patchValues(label, value) {
  return this.fb.group({
    label: [label],
    value: [value]
  })    
}

Finally, here is a

Demo

这篇关于Angular 2. 如何在 Reactive Forms 中为控件使用对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！