Reactive Forms con FormBuilder

Notas

Cada uno de los campos del formulario.

Conjunto de campos (FormControl)

Servicio, requiere inyección de dependencias en el constructor.

los ultimos videos parece que se cortan o solo me pasa a mi?, el sonido esta bien, pero la imagen parece que salta cada x segundos

Se está pegando el video.

El audio esta bien, el video esta lagueado…

¿cómo subscribirse a un solo field usando formGroup?

this.form.get("firstname").valueChanges.subscribe(x => {
   console.log(x)
})

Una forma un poco menos trabajosa de controlar los errores es creando un método, que incluso se puede tener en una clase abstracta para obtener los errores que tiene cierto control de la siguiente forma

export class GeneralValidators {
  public hasError = (
    form: FormGroup,
    controlName: string,
    errorName: string
  ) => {
    return form.controls[controlName].hasError(errorName);
  };
}

de esta forma si inyectamos esta clase en nuestro componente solo debemos usar el método para obtener el error de una validacion de la siguiente forma

<mat-error
   *ngIf="generalValidators.hasError(form, 'required')">
   Required Field
</mat-error>

De esta forma en una manera mas resumida podemos obtener los errores de un formgroup y aplicarlo en directivas en el template de una manera mas resumida y ordenada

Builder adopted!

es mucho mas cómodo, hermoso código 😃

Buena práctica de validación de forms

Les ha salido este error al colocar las validaciones?
Error TS2531 object is possibly null in angular reactive forms
Lo solucioné de esta forma

"forceConsistentCasingInFileNames": false,
   "strict": false,
   "noImplicitReturns": false,
   "noFallthroughCasesInSwitch": false,
   ...
   "angularCompilerOptions": {
      "strictInjectionParameters": false,
      "strictInputAccessModifiers": false,
      "strictTemplates": false
   }

Me gusto mucho esta clase, no sabia que se podría usar de manera mas limpia los formularios con el formBuilder.