Dynamic value return null in reactive form using Angular 11

Question

I have created reactive form in angular, have fetched few fields from backend and applied in input type hidden field its value will not change. i need to insert the value to database. but the value return null in console but in developer tools its showing correct value. kindly find the code below

in 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>

in discussions.component.ts file

this.pollResult = this.fb.group({
   pollQuestionId:[''],
   userId:[''],
   pollOption:['']
});

in the above code pollOption value working fine and pollQuestionId and userId returns null not return the value which is applied in value attribute.

Could you share how you get data from backend

Owen Kelvin
– Owen Kelvin

2021-04-12 14:48:22 +00:00
Commented Apr 12, 2021 at 14:48 — Owen Kelvin
– Owen Kelvin, Commented Apr 12, 2021 at 14:48

Owen Kelvin · Accepted Answer · 2021-04-12 15:01:11Z

1

Remove the binding to the value property

  <input type="hidden" formControlName="pollQuestionId">
  <input type="hidden" name="userId" formControlName="userId">

In your TS, set the value of this controls

ngOnInit() {
  this.myService.getData().subscribe({
    next: (pollQuestion) => {
      this.pollResult.get('pollQuestionId').setValue(pollQuestion?.id);
      this.pollResult.get('userId').setValue(1)
    }
  })
}

answered Apr 12, 2021 at 15:01

Owen Kelvin

15.1k11 gold badges51 silver badges86 bronze badges

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

Collectives™ on Stack Overflow

Dynamic value return null in reactive form using Angular 11

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