sigo con los formularios y le voy pillando el truquillo, me quedo con los **formsGroup** porque me parecen el que mejor encapsula y modulariza para lo que estoy llevando a cabo. Dicho esto, estoy creando **validaciones para mi formgroup que estan en la clase `Validator`** y tambien otras que he **customizado**. Aqui os dejo mi controlador del formulario de registro: import {Component, OnInit} from '@angular/core'; import { FormBuilder, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'app-register', templateUrl: './register.component.html', styleUrls: ['./register.component.css'], }) export class RegisterComponent implements OnInit { registerForm: FormGroup; constructor( public fb:FormBuilder ) { this.registerForm = this.fb.group({ name:['',[Validators.required]], email:['',[Validators.required,Validators.email,Validators.pattern('"^[a-z0-9._%+-]+@[a-z0-9.-]+\\\\.[a-z]{2,4}$"')]], password:['',[Validators.required]], repeat_password:['',[Validators.required]], },{ validators:[this.checkPasswords,this.checkNameAndEmailMustBeEquals] }); } ngOnInit(): void { } register() { // console.log(this.registerForm.value); // console.log(this.registerForm.controls); console.log(this.registerForm); } /** * CUSTOM VALIDATIONS */ checkPasswords(form: FormGroup){ const password = form.get('password').value; const repeatPassword = form.get('repeat_password').value; return password === repeatPassword ? null: {notSame:true}; } checkNameAndEmailMustBeEquals(form:FormGroup){ const name = form.get('name').value; const email = form.get('email').value; let strEmail = email.substring(0, email.lastIndexOf("@"));; return strEmail === name ? null : {notSame:true}; } } Pero ahora quiero resolver el siguiente problema, **como intension es desacoplar de la vista casi todas las directivas ngIf y eso par alas validaciones** ya no quiero tener que decir en ellas : > Si el campo name es requerido y no esta escrito (despues de haber pinchado en el) hardcodeo el error debajo del correspondiente input. Ej: <div *ngIf="!first.valid && (first.dirty || first.touched)"> <small class="text-danger font-weight-bold" *ngIf="first.errors.required">Campo obligatorio</small> <small class="text-danger font-weight-bold" *ngIf="first.errors.minlength">Longitud minima: 3 caracteres</small> <small class="text-danger font-weight-bold" *ngIf="first.errors.maxlength">Longitud maxima: 10 caracteres</small> </div> Quiero pasar de hacer eso pues me resulta una forma de ensuciar la vista del componente mas de la cuenta. ¿No podria, junto a las validaciones (tanto de la clase Validator como las customizadas que tengo abajo) poner un mensaje en **string** que se displayearia por cada validacion fallida dentro de cada control del formulario? Poco un pseudocodigo de lo que me refiero: Tengo esta validacion actualmente: this.registerForm = this.fb.group({ name:['',[Validators.required]], email:['',[Validators.required,Validators.email,Validators.pattern('"^[a-z0-9._%+-]+@[a-z0-9.-]+\\\\.[a-z]{2,4}$"')]], password:['',[Validators.required]], repeat_password:['',[Validators.required]], },{ validators:[this.checkPasswords,this.checkNameAndEmailMustBeEquals] }); Pues poner por ejemplo, **en el caso de que el name, que esta requerido, no se haya puesto**: name:['',[Validators.required: 'Oye, que aqui dice que el name debe ser requerido' Validators.minLength(3),'Caracteres min: 3' ]], Y asi con todo. Y ya en la vista poner : > Si name.validacionMinLengthFalla => name.validacionMin.mensaje Espero que se me entienda, pero me parece una forma espectacular de modularizarlo, pero no he encontrado como hacerlo, no se si es que no es buena idea por x motivos o algo, espero me puedan ayudar. Muchas gracias, de verdad.