What to use instead of ngModel?

Question

I wrote this component.html:

<mat-form-field>
    <mat-label>Genre</mat-label>
    <mat-select [(ngModel)]="selectedGenre" required formControlName="genre">
        <mat-option>--</mat-option>
        <mat-option *ngFor="let item of genre | keyvalue" [value]="item.key">{{ item.key }}</mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field *ngIf="selectedGenre">
    <mat-label>Choose a Sub Genre</mat-label>
    <mat-select formControlName="subgenre">
        <mat-option *ngFor="let sub of genre.get(selectedGenre)" [value]="sub">{{ sub }}</mat-option>
    </mat-select>
</mat-form-field>

but got following warning on the console:

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 a future version of Angular.

I am quite new to angular. Is there an easy solution for a workaround?

Answer 1

you should not be using ngModel with reactive forms for further queries please read https://angular.io/guide/reactive-forms If the form is not complex and does not have many logics you can simply use ngmodel and not reactive forms