Angular Reactive Form, dynamically create form controls

Question

I have a reactive form which need to have one or more simple input field. So I am doing a *ngFor to go ovr the array of object and can successfully create the labels. I can also create the input field but I don't know how to track the entered value in it. I need to collect the inputs entered by user and send it to the backend.

How do I do it? I did research and found out I should use an array to hold all possible number of generated input fields. But how do I create the form-control for it.

    <form [formGroup]="SignupForm" (ngSubmit)="onSubmit()">
      <div class="form-group p-mb-4"  *ngFor="let _insertField of actionsetSelected; let i=index">
         <label class="formLabel" *ngIf="_insertField" for="userInput">{{_insertField.name}}</label>
         <input type="text" class="form-control" id="insertNames" [formControlName]="i">
      </div>
    <button label="Submit" ></button>
</form>

 

in my ts:

 
this.SignupForm = new FormGroup({
    'insertNames':new FormArray([])
  });

See this nested reactive form example ... stackblitz.com/edit/… — yasir ali

user12163165 user12163165 · Accepted Answer · 2021-04-26T21:29:57

it is very simple.. just use valueChanges on the form or on any of the form fields.. for example.

let's assume I have a form filed by the name email, in my ts file I can do the following.

ngAfterViewInit() {
    this.SignupForm.email.valueChanges.pipe(
       tap(value: string) => { // value is the email the user entered
    
           // do what ever you want with value     

       }
    ).subscribe()
}

you can of course listen to the form object like so..

ngAfterViewInit() {
    this.SignupForm.valueChanges.pipe(
       tap(value: string) => { // value is your form object containing all the fields
    
           // do what ever you want with value     

       }
    ).subscribe()
}

DONT FORGET TO UNSCUBSCRIBE !!

Angular Reactive Form, dynamically create form controls

1 Answers