[英]Angular Reactive Forms with FormArray inside a nested FormGroup
I've found a lot of examples, also other questions that have been answered. 我发现了很多例子,还回答了其他问题。 Including this one that seems pretty clear, but I still can't make my case work.
包括这一看似很清楚的内容,但我仍然无法解决我的问题。
I have the following Angular reactive form (which seems ok, if I compare to the linked question's answer): 我有以下Angular反应形式(如果我将其与链接的问题的答案进行比较,这似乎还可以):
this.frm = this.fb.group({
// ... a bunch of other groups
// and then:
custom_data: this.fb.group({
pairs: this.fb.array([
this.fb.group({
custom_key: '',
custom_value: ''
})
]),
expire_date: '',
active: ['', Validators.required]
})
});
I can't make it render in the view, no matter what I've tried, I get an error. 无论如何,我都无法在视图中呈现它,但是会出现错误。 This is the latest/current piece of code that I got to, after all the other answers and google results I could find:
在找到所有其他答案和google结果之后,这是我所获取的最新/当前代码段:
<form [formGroup]="frm">
<fieldset>
<legend>Custom Data:</legend>
<ng-container formGroupName="custom_data">
<div class="row">
<div formArrayName="pairs">
<div *ngFor="let pair of custom_data.get('pairs').controls; let i = index">
<div [formGroupName]="i">
<input type="text" formControlName="custom_key" placeholder="Custom key" />
<input type="text" formControlName="custom_value" placeholder="Custom value" />
</div>
</div>
</div> <!-- / end FormArray -->
<div class="col-xs-6">
<div class="form-group">
<label class="control-label">Expires</label>
<input type="text" formControlName="expire_date" class="form-control" />
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label">Active<sup>*</sup></label>
<select formControlName="active" class="form-control">
<option value="1">Yes</option>
<option value="0">No</option>
</select>
</div>
</div>
</div>
</ng-container>
</fieldset>
</form>
I've tried all of the following, without any luck: 我尝试了以下所有方法,但没有任何运气:
<div *ngFor="let pair of custom_data.get('pairs').controls; let i = index">
<div *ngFor="let pair of pairs.controls; let i = index">
<div *ngFor="let pair of frm.controls['custom_data'].get('pairs').controls; let i = index">
I'm not even sure if a FormArray is a Control or a Group or what is it, every usage I find seems so unique and complicated. 我什至不确定FormArray是控件还是Group或它是什么,我发现的每种用法似乎都如此独特和复杂。
So I ended up redoing it from scratch. 所以我最终从头开始重做它。 Weird thing... it turns out that the 3rd thing I've tried eventually worked:
奇怪的事情……事实证明,我尝试过的第三件事最终成功了:
<div *ngFor="let pair of frm.controls['custom_data'].get('pairs').controls; let i = index">
Not sure why it didn't work the first time. 不知道为什么它第一次不起作用。
One thing to note: I also discovered that I get an error when doing a production build. 需要注意的一件事:我还发现在进行生产构建时出现错误。 In order to solve that, I had to add this method in my component's class:
为了解决这个问题,我必须在组件的类中添加此方法:
myFormArray() {
return this.frm.controls['custom_data'].get('pairs') as FormArray;
}
and then, in my template, use the method: 然后在我的模板中,使用方法:
<div *ngFor="let pair of myFormArray().controls; let i = index">
(which is really weird and shouldn't be necessary, if you ask me...) (如果您问我,这真的很奇怪,应该没有必要...)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.