Puede ser que en alguna ocasión queramos manejar un valor con ngModel pero no tenerlo en un Reactive Form por cualquier motivo pero, cuando lo añadimos se nos tiñe la consola de rojo, cosa que no nos gusta (y básicamente deja de funcionar nuestra app).
Entonces… ¿Cómo podemos utilizar un campo con ngModel dentro de un Reactive Form?
Fácil, al campo que tiene el ngModel le añadimos el atributo
[ngModelOptions]="{standalone: true}"
De tal forma que nos quedaría algo parecido a:
<form (ngSubmit)="submitForm()" [formGroup]="formExample"> <div> <label for="name">Name: </label> <input formControlName="name" type="text" id="name" /> </div> ... <div> <label for="is_company">Is Company: </label> <input type="checkbox" [(ngModel)]="isCompany" [ngModelOptions]="{ standalone: true }" id="is_company" /> </div> <button type="submit">Crear cuenta</button> </form>
Aquí lo podemos ver y trastear con él: