如何使用 Angular 以数组形式设置值答案

【问题标题】：How to set value in array form with Angular如何使用 Angular 以数组形式设置值
【发布时间】：2017-07-08 14:57:17
【问题描述】：

我想像这样在数组中设置值：

this.form.controls[name].setValue('name')

但我正在使用数组形式，这不起作用，即使我显式传递数组索引

例如，这是我的表单数组，我想做的是在函数中设置值

user: FormGroup;
users: FormGroup;

constructor(private fb: FormBuilder) {}
ngOnInit() {
  this.user = this.buildGroup();
  this.users = this.fb.group({
    data: this.fb.array([this.user])
  });
}
get fData() {
  return this.users.get('data') as FormArray;
}
buildGroup() {
  return this.fb.group({
    name: ['', [Validators.required, Validators.minLength(2)]],
    account: this.fb.group({
      email: ['', Validators.required],
      confirm: ['', Validators.required]
    })
  });
}
setValue(index) {
  // This doesn't work
  this.fData[index].controls[name].setValue('name')
}
onSubmit() {
  this.fData.push(this.buildGroup());
  const {valid, value} = this.fData;
  console.log(valid, value);
}

【问题讨论】：

放弃我之前的回答。问题很可能是你不是passing an array to setValue。
不应该把索引传给具体的数组形式吗？我正在尝试这个，但这不起作用 setValue(index) { this.fData.setValue(['Name']);错误说必须为名称为'name'的fom控件提供一个值
试试这个：this.fData[index].controls['name'].setValue(['name'])
不工作：无法读取未定义的属性“控件”

标签： angular angular-reactive-forms

【解决方案1】：

对于数组，您需要使用setControl。像这样的：

    this.productForm = this.fb.group({
        productName: ['', [Validators.required,
                           Validators.minLength(3),
                           Validators.maxLength(50)]],
        productCode: ['', Validators.required],
        starRating: ['', NumberValidators.range(1, 5)],
        tags: this.fb.array([]),
        description: ''
    });

    ...

    // Update the data on the form
    this.productForm.patchValue({
        productName: this.product.productName,
        productCode: this.product.productCode,
        starRating: this.product.starRating,
        description: this.product.description
    });
    this.productForm.setControl('tags', this.fb.array(this.product.tags || []));

【讨论】：

我一定错过了你的复数课程；-)
找到它：app.pluralsight.com/…
“Angular：反应形式”课程？希望对您有所帮助！
哈哈！希望我们可以为 cmets 添加表情符号！
非常感谢！！！！我使用的是 control.push() 但 control.setControl() 正是我需要的！！

【解决方案2】：

这是我在 formArray 的特定表单控件中手动设置值并为我工作的方法。我将formArray 命名为bundleDetails。

   this.formBuilderObj['bundleDetails'] = 
   this.formBuilder.array([this.createBundleItem()]);

    createBundleItem(): FormGroup {
    return this.formBuilder.group({
     bsku: ['', Validators.required],
     bqty: ['', Validators.required],
     bprice: ['', Validators.required]
    });
   }

设置bsku控件值的方法（其中索引是从html文件传递的[formGroupName]="i"）。

   setSku(sku: string, index: number) {
   const faControl = 
   (<FormArray>this.pmForm.controls['bundleDetails']).at(index);
   faControl['controls'].bsku.setValue(sku);
  }

希望这会有所帮助。编码愉快。

【讨论】：

太好了，这很好用，我相信可以回答在特定索引处设置控件值的问题，而不是整个数组的值...

【解决方案3】：

如果您收到错误“ERROR Error: Cannot find control with path: 'addresses -> 0 -> addressType'”或类似的错误，这很可能是因为您正在传递值，但您的 html 模板是期望值以及控件名称。

要解决此问题，请遍历数组中的每个项目，并为每个值创建一个新的表单组实例 - 根据您的视图所期望的 - 然后推送到一个新的数组变量，然后我们在表单中设置该变量。

见下面的代码：

var tagsArray = [];
this.product.tags.forEach(product => tagsArray.push(this.fb.group({tag: [product.tag, [Validators.required]]})));
this.productForm.setControl('tags', this.fb.array(tagsArray || []));

在视图中引用如下：

<div class="tag" *ngFor="let t of tags.controls; let i = index" [formGroupName]="i" class="mb-2">
      <input type="text" formControlName="tag" placeholder="Tag name" class="primary_input">
       <button mat-icon-button (click)="deleteTag(i)">
           <mat-icon>clear</mat-icon>
       </button>
 </div>

这使您可以加载以前的结果，同时能够添加更多值和验证用户输入。

希望这会有所帮助。

【讨论】：