I currently have this code that allows users to add a new set of fields. However, I am looking to have the component render out 3 sets of data upon initialization.
Currently, one set of fields is generated using the initRateRow function. How can I modify it to iterate through an HttpClientModule and populate the "this._fb.group" accordingly?
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-exchange-rates',
templateUrl: './exchange-rates.component.html',
styleUrls: ['./exchange-rates.component.scss']
})
export class ExchangeRatesComponent implements OnInit {
public myForm: FormGroup;
constructor(private _fb: FormBuilder) { }
ngOnInit() {
this.myForm = this._fb.group({
rates: this._fb.array([
this.initRateRow(),
])
});
}
initRateRow() {
return this._fb.group({
rateUnit: ['24', Validators.required],
currencyFrom: ['GBP', Validators.required],
currencyTo: ['USD', Validators.required]
});
}
blankRateRow() {
return this._fb.group({
rateUnit: ['', Validators.required],
currencyFrom: ['', Validators.required],
currencyTo: ['', Validators.required]
});
}
addRateRow() {
const control = <FormArray>this.myForm.controls['rates'];
control.push(this.blankRateRow());
}
removeRateRow(i: number) {
const control = <FormArray>this.myForm.controls['rates'];
control.removeAt(i);
}
save(model) {
// call API to save
// ...
console.log(model);
}
}