So I used the guide here: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html
I need to add more fields to an existing field. I've made something that works, but it's clunky and it resets the form when I hit it. Code below:
In dynamic-form.component.ts:
add_textbox()
{
this.questions.push(this.questionService.create_textbox({key: "test", label: "Test"}));
console.log(this.questions);
this.form = this.qcs.toFormGroup(this.questions);
}
In question.service.ts
create_textbox({key, value, label = '', order = 1, type = "text", description = "", help = ""}: {key?: any, value?: any, label?: any, order?: any, type?: any, description?: any, help?: any})
{
return new TextboxQuestion({
key,
label,
value,
order,
description,
type
});
}
My button is also in dynamic-form.component.html
but I'd like it to be in dynamic-form-question.component.ts
instead. Is this possible?
first of all
import { FormGroup,FormArray,FormBuilder,Validators } from '@angular/forms';
then
addForm: FormGroup; // form group instance
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
// *** this is code for adding invoice details ***
this.addForm = this.formBuilder.group({
invoice_no: ['', Validators.required],
file_no: ['', Validators.required],
description: ['', Validators.required],
linktodrive: this.formBuilder.array([
this.initLink(),
])
});
}
initLink() {
return this.formBuilder.group({
linkAddress: ['', Validators.required]
});
}
addLink() {
const control = < FormArray > this.addForm.controls['linktodrive'];
control.push(this.initLink());
}
removeLink(i: number) {
const control = < FormArray > this.addForm.controls['linktodrive'];
control.removeAt(i);
}
Begin and close your HTML with:
<div formArrayName="linktodrive"></div>
For creating and removing dynamic fields to your form use this html:
<div *ngFor="let address of addForm.controls.linktodrive.controls; let i=index">
<div>
<span>Link {{i + 1}}</span>
<span *ngIf="addForm.controls.linktodrive.controls.length > 1"><a (click)="removeLink(i)">REMOVE</a></span>
</div>
<!-- Angular assigns array index as group name by default 0, 1, 2, ... -->
<div [formGroupName]="i">
<input type="text" placeholder="Enter Link" formControlName="linkAddress">
</div>
</div>
And finally the "ADD" link
<div><a (click)="addLink()"></a></div>
i went through a very useful blog post and that worked fine. dynamically add rows in reactive forms angular 6. Comment for any sort of doubts in the code
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With