[英]Reactive forms: Angular formarrays and formcontrols
Let's say that I have 2 arrays假设我有 2 arrays
arraynames['Dog', 'Cat', 'Donkey', 'Bird'];
nrofanimals['10','15', '20', '25'];
These two arrays is defined right now for simplicity but in reality can be changed to other values and so on.为简单起见,现在定义这两个 arrays,但实际上可以更改为其他值等。 The only constrain is that both of the arrays must have the same size.
唯一的限制是两个 arrays 必须具有相同的大小。 What I want is that I want to create a formcontrol for the amount of animals for each name.
我想要的是为每个名称的动物数量创建一个表单控件。 What I mean is I want in my localhost:4200 to show a mat-form-field with mat-label "Dog" with mat-input "10", and another mat-form-field with mat-label "Cat" with mat-input "15" and so on.
我的意思是我想在我的 localhost:4200 中显示一个带有 mat-label“Dog”和 mat-input“10”的 mat-form-field,以及另一个带有 mat-label“Cat”和 mat 的 mat-form-field - 输入“15”等。 How can I do that?
我怎样才能做到这一点? Keep in mind that I give these two arrays as example only.
请记住,我仅举这两个 arrays 作为示例。 In my case the arrays will be populated by the user so I cannot have predefined arrays. Thanks in advance.
在我的例子中,arrays 将由用户填充,因此我无法预定义 arrays。提前致谢。
Checkout Angular Dynamic Forms , FormArray and FormGroup to understand the basic concept required for your usecase.查看Angular Dynamic Forms 、 FormArray和FormGroup以了解您的用例所需的基本概念。
A basic Proof of concept will be as following:基本的概念证明如下:
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
}
}
}
Then create your html template and iterate on your animal names' array, setting the animal name as formControlName
, that way you will get your fields dynamically generated;然后创建您的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.