When I change the value in club dropdown, the ID visually changes, but nothing gets passed into my form. I keep getting null when try to insert the value from ID box to a table. Would appreciate any help
<div class="form-group">
<label>id</label>
<div class="form-control" name="club_api_id" ngDefaultControl [(ngModel)]="form.club_api_id">
<tr *ngFor="let obj of klubbid" [value]="obj.id">{{obj.id}} </tr>
</div>
This is how it look like:
It looks like there are a few issues with the position where your form object is attached in the DOM.
You have attached the form to the div "club_api_id"; div elements are not going to update the form, as the user does not usually have a way to change its contents.
the "id" is not pegged to a form attribute at the moment, at least not from this part of the code you have shared. In this tr, the value of the id will be placed into the tr
, but if the user changes it, it will not be placed into the form.
<tr *ngFor="let obj of klubbid" [value]="obj.id">{{obj.id}} </tr>
if you use a select
instead of the tr
and attach the form property to the value of this select, it should work:
<div class="form-control" name="club_api_id">
<select [(ngModel)]="form.club_api_id">
<option *ngFor="let obj of klubbid" [value]="obj.id">{{obj.id}}</option>
</select>
</div>