ngModel in FormGroup

Posted on   |   In ,   |  

In short ngModel can't be used by itself within FormGroup

1
2
3
<div [formGroup]="myGroup">
   <input name="firstName" [(ngModel)]="firstName">
</div>

The above code will throw an error like

1
TypeError: Cannot set property stack of [object Object] which has only a getter at assignAll

Why ? kara@Github explained it very well at Github

formGroup expects you to create your own FormControl instances, whereas ngModel creates FormControl instances implicitly for you. You can't have two conflicting FormControl instances on the same form control element. When you use formControlName, ngModel does not activate or create a control (it's simply used as an @Input). formControlName just links to the existing input you created in your class.

Therefore, to make above code work, here is the correct code

1
2
3
4
<div [formGroup]="myGroup">
   <input formControlName="firstName" [(ngModel)]="firstName">
</div>