Lean.dez

Diferencias entre ngModel y formControl

ngModel

Sirve para hacer double-binding entre elementos. La sintaxis es la famosa banana-box que se forma al tener corchetes y paréntesis dentro. [()] Un ejemplo clásico de su uso es cuando se quiere conectar en dos sentidos una propiedad dentro de una clase con un valor de un input.

formControl

Sirve para controlar los elementos de un formulario. Permite una forma sencilla de validación, ya sea con validators pre construidos provenientes de Angular Forms, como asi tambien de validadores personalizados que podemos construir.

// archivo TS del componente
import { Component } from @angular/core
import { FormControl, Validators } from @angular/forms

@Component({
selector: "sz-input", 
templateUrl: "./input.component.html", 
})

export class InputComponent {
// Con esta simple linea de codigo, ya estoy teniendo control sobre el form
form: FormControl = new FormControl("", [Validators.required])
}

<input [formControl]="form" />

Referencias