patchValue not working when using [[ngModel]] - html

Question

So when I open an item editor dialog, I want to be able to put some default values that I retrieve from the specific item I selected. This all worked up until I added [[ngModel]] in each of the fields. In fact, it still works when I remove it. I want to be able to do it again without removing the ngModel as I heavily depend on it in my code.
This is my HTML
<div mat-dialog-content class="formCentered">
<form [formGroup]="form">
<mat-form-field class="inputBox">
<mat-label>Scanner</mat-label>
<input matInput formControlName="scannerName" [(ngModel)]="data.scanName" maxlength="50">
</mat-form-field>
<mat-form-field class="inputBox">
<mat-label>Calibration Price</mat-label>
<input matInput formControlName="calibrationPrice" [(ngModel)]="data.caliPrice" maxlength="50">
</mat-form-field>
<mat-form-field class="inputBox">
<mat-label>Calibration Description</mat-label>
<input matInput formControlName="calibrationDescription" [(ngModel)]="data.caliDescription" maxlength="50">
</mat-form-field>
</form>
</div>
<div mat-dialog-actions class="alignRight">
<button mat-button class="confirmationButton" (click)="onNoClick()" class="confirmationButton">Cancel</button>
<button mat-button class="confirmationButton" [mat-dialog-close]="data" cdkFocusInitial class="confirmationButton">Save</button>
</div>
And this is my part of the ts for this
dialogRef.componentInstance.form.patchValue({
scannerName: cal.scannerName, // scannerName is the old value (unedited)
calibrationPrice: cal.calibrationPrice, // calibrationPrice is the old value (unedited)
calibrationDescription: cal.calibrationDescription // calibrationDescription is the old value (unedited)
});
Any idea on how I can achieve that?

Answer 1

It's not a good practice merge reactive forms with ngModel.
You can remove all of the [(ngModel)] in the html, and subscribe to the form changes. Then, when some field of the form change, the subscription would change your varaibles as well.
Add in your ts code something like this:
// after you have inicialized your form
this.form.get('scannerName').valueChanges
.subscribe((val: any) => {
//this.data.scanName = this.form.get('scannerName').value;
this.data.scanName = val
});
this.form.get('calibrationPrice').valueChanges
.subscribe((val: any) => {
//this.data.calibrationPrice= this.form.get('calibrationPrice').value;
this.data.calibrationPrice= val
});
this.form.get('calibrationDescription').valueChanges
.subscribe((val: any) => {
//this.data.calibrationDescription= this.form.get('calibrationDescription').value;
this.data.calibrationDescription= val
});

Answer 2

You can't add NgModel in formGroup.
You have to define the formControl
example:
form = new FormGroup({
scannerName: new FormControl(''),
calibrationPrice: new FormControl(''),
calibrationDescription: new FormControl(''),
})
If you want set default value, you have to set value in new FormControl like this:
form = new FormGroup({
scannerName: new FormControl('test'),
calibrationPrice: new FormControl('value'),
calibrationDescription: new FormControl(someValue),
})
it's seems that you want change data variable, you could do this:
this.data = this.form.value