Reactive Forms: dynamically add and delete to a type string array in Angular 4

Question

How do I add a field to a reactive form that can dynamically add and delete to a type string array? The implementation I have right now is a FormArray, however it adds to the array as a object rather that just another string in the array. (see code below)

ngOnInit() {
  this.form = this.formBuilder.group({
    user: '',
    directory: '',
    filename: this.formBuilder.array([ this.createItem() ])
  });
}

createItem(): FormGroup {
  return this.formBuilder.group({
    filename: ''
  });
}

You need to define the form as the class variable in order to access it everywhere! — Exterminator
– Exterminator, Commented Oct 12, 2018 at 4:21
@Exterminator It is declared in the code I just didn't include in the snippet. It works but I'm asking how to implement as adding to an array as a string rather than an object. — caricature
– caricature, Commented Oct 12, 2018 at 4:25
check this out Reactive Forms in Angular: Dynamically Creating Form Fields With FormArray — Exterminator
– Exterminator, Commented Oct 12, 2018 at 4:26
@Exterminator that is the reference I am using right now.. Is there a way to just add input directly to an array instead of creating a formgroup for the FormArray? — caricature
– caricature, Commented Oct 12, 2018 at 4:30
yes, you can create template driven form instead of reactive form — Exterminator
– Exterminator, Commented Oct 12, 2018 at 4:32

Chellappan வ · Accepted Answer · 2018-10-12 04:37:07Z

3

Instead of creating formGroup you can try this

constructor(private formBuilder:FormBuilder){
   this.form = this.formBuilder.group({
    user: '',
    directory: '',
    filename: new FormArray([new FormControl('hai')])
  });

 }

 addFormInput(){
    const form=new FormControl('');
   (<FormArray>this.form.controls['filename']).push(form);
  }

removeFormInput(i){
  (<FormArray>this.form.get('filename')).removeAt(i);
 }

Example:https://stackblitz.com/edit/angular-tvuksw

answered Oct 12, 2018 at 4:37

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Reactive Forms: dynamically add and delete to a type string array in Angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related