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([])
});
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 !!
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.