反应式 forms: Angular formarrays and formcontrols

Question

假设我有 2 arrays

arraynames['Dog', 'Cat', 'Donkey', 'Bird'];
nrofanimals['10','15', '20', '25'];

为简单起见，现在定义这两个 arrays，但实际上可以更改为其他值等。 唯一的限制是两个 arrays 必须具有相同的大小。 我想要的是为每个名称的动物数量创建一个表单控件。 我的意思是我想在我的 localhost:4200 中显示一个带有 mat-label“Dog”和 mat-input“10”的 mat-form-field，以及另一个带有 mat-label“Cat”和 mat 的 mat-form-field - 输入“15”等。 我怎样才能做到这一点？ 请记住，我仅举这两个 arrays 作为示例。 在我的例子中，arrays 将由用户填充，因此我无法预定义 arrays。提前致谢。

Answer 1

查看Angular Dynamic Forms 、 FormArray和FormGroup以了解您的用例所需的基本概念。

基本的概念证明如下：

import { Component, Input } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
    
@Component({
  selector: 'app-animals',
  templateUrl: './dynamic-form-question.component.html'
})

export class AnimalsComponent {
  
  animalForm: any; 

  constructor(){
    const formControls = {};
      arraynames.forEach((animal,index)=>{  //iterate over your animal's array
        formControls['animal'] = new FormControl(nrofanimals[index]); //create a new form control for each animal and set the value of formcontrol via index from no array
        });
        this.animalForm = formControls; //assign the object to the formGroup variable 
      }
  }
}    

然后创建您的 html 模板并迭代您的动物名称数组，将动物名称设置为formControlName ，这样您就可以动态生成您的字段；

<form  [formGroup]="animalForm"> 
    
   <div *ngFor="let animal of arraynames;">
       <mat-form-field>
           <label>{{animal}}</label>
           <input  [formControlName]="animal">      
        <mat-form-field>
    </div>
    
    <div class="form-row">
        <button type="submit">Save</button>
    </div>

</form>