After creating a reactive form in Angular, I fetched some fields from the backend and applied them to an input type hidden field. The value of this field will not change, but when I try to insert this value into the database, it returns null in the console. However, in the developer tools, it shows the correct value. Here is the code snippet:
Inside discussion.component.html file:
<form [formGroup]="pollResult">
<input type="hidden" value="{{pollQuestion?.id}}" formControlName="pollQuestionId">
<input type="hidden" name="userId" value="1" formControlName="userId">
<div class="radio-group">
<label class="container" *ngFor="let item of pollQuestion?.CM_Poll_Options;let i=index"
> {{item.pollOption}}
<input type="radio" checked="checked" name="pollOption" value="{{item.id}}" formControlName="pollOption"/>
<span class="checkmark"></span>
<small>60%</small>
<div style="width: 60%"></div>
</label>
</div>
<button type="submit" class="submit_vote" (click)="submitPoll(pollResult.value)">
Submit your vote
</button>
</form>
Inside discussions.component.ts file:
this.pollResult = this.fb.group({
pollQuestionId:[''],
userId:[''],
pollOption:['']
});
In the above code snippet, the pollOption value works fine, but the pollQuestionId and userId return null instead of the value applied in the value attribute.