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):
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:
<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.
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...)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.