Combinar ngModel dentro de un Reactive Form de Angular

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:


Tu opinión es importante para mi, ¿Te ha resultado útil este artículo?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*