I recently encountered a warning in my Angular 6 project while using ngModel and formControlName together. Specifically, when trying to bind inputs in an update popup, I received a warning from Angular 7 advising me to remove ngModel. The suggested approach now is to always map everything to my student object. What would be the most effective way to achieve this? Is it possible to set a formValueType for the form value, such as studentObject in the code snippet below, in order to automatically bind?
Angular warning:
It looks like you're using ngModel on the same form field
as formControlName. Support for using the ngModel input property and
ngModelChange event with reactive form directives has been deprecated
in Angular v6 and will be removed in Angular v7.
myHtml
<form [formGroup]="studentForm" ??????formValueType="studentObject"?????>
<p-dialog>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Name Surname</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.nameSurname" formControlName="nameSurname" />
</div>
</div>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Email</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.email" formControlName="email" />
</div>
</div>
<div class="ui-g-12 form-group">
<div class="ui-g-4">
<label>Age</label>
</div>
<div class="ui-g-8">
<input pInputText [(ngModel)]="selectedStudent.age" formControlName="age" />
</div>
</div>
</div>
<button type="button" pButton icon="fa fa-check" (click)="save()" label="Save"></button>
</p-dialog>
</form>