Usando FormGroup para agrupar multiples campos

	save(event: Event): void {
		this.form.markAllAsTouched()
		if (this.form.invalid) { return }
		console.log(this.form.value)
	}

Esta fue mi solución, si es inválido no imprime en consola y marca como touched el controlador name, de esta manera podemos dar feedback al usuario de que ese campo es requerido.

save(event): void | boolean {
    if (this.form.invalid){
      this.form.controls.name.markAsTouched();
      return false;
    }
    console.log(this.form.value);
  }

Se me ocurrio esta solución:

 <p>
    <button type="submit" [disabled]="form.invalid">Enviar</button>
  </p>

Este video se ve entre cortado y ya intenté reproducir en los tres servidores, pero ninguno funciona bien. Porfa arréglenlo.

Here´s my solution

 saveForm(event: any){
    if(this.form.valid){
      console.log(this.form.value);      
    }else{
      console.log("Errors has ocurrs!!!!");
    }

Cual es la diferencia de hacerlo instanciando un new FormGroup y utilizar FormBuilder.group ??

Si les sale el siguiente error en el formulario, se puede solucionar quitando los atributos de name en los radio inputs

If you define both a name and a formControlName attribute on your radio button, their values must match.

como puedo hacer un getter de un formbuilder que tiene dentro varios formArray anidados.

El profe Nico es un duro me gusto mucho este curso. Estoy aprendiendo mucho ! , ademas las dudas que tenia la he resuelto . Gracias .

Dejo la pregunta por si alguien la puede responder, cual seria la diferencia entre hacer el return del getter de estas maneras ??

this.from.get('name');

this.from.controls.name

Si estan teniendo errores con versiones de angular mayores a la 10, de que el object is possible null lean esto:

Link

En Angular 14 no se necesita el new en los controles

html

[disabled]="form.invalid"

ts

    event.preventDefault();
    console.log(this.form.value);

Se recomienda hacer un curso de escritura rapida, para escribir asi de rapido como el profe.

En lugar de usar FormGroup y por cada campo crear una nueva instancia de FormCrontrol como en el siguiente código:

form = new FormGroup ({
name: new FormContro('', Validators.required)
})

Inyecté FormBuilder y designé los campos que tendría mi formulario, los valores por defecto y los validadores de cada campo :

form;

constructor(private formBuilder: FormBuilder) {}

this.form = this.formBuilder.group({
      nameField: ['', [Validators.required, Validators.maxLength(10)]],
      emailField: ['',Validators.required],
      phoneField: ['',Validators.required],
      colorField: ['#000000',Validators.required],
      ageField: [12,Validators.required],
      dateField: ['', Validators.required],
      categoryField: ['category-1', Validators.required],
      tagsField: ['tag-1', Validators.required],
      agreeField: [false, Validators.required],
      genderField: ['', Validators.required],
      zoneField: ['', Validators.required],
    });

get nameField (){
    return this.form.get('nameField')
  }

   get emailField (){
    return this.form.get('emailField')
  }
   get phoneField (){
    return this.form.get('phoneField')
  }
   get colorField (){
    return this.form.get('colorField')
  }
   get ageField (){
    return this.form.get('ageField')
  }
   get dateField (){
    return this.form.get('dateField')
  }
   get categoryField (){
    return this.form.get('categoryField')
  }
   get tagsField (){
    return this.form.get('tagsField')
  }
   get agreeField (){
    return this.form.get('agreeField')
  }
   get genderField (){
    return this.form.get('genderField')
  }
   get zoneField (){
    return this.form.get('zoneField')
  }

Y para validar que el botón de enviar estuviera habilitado solo cuando se cumplieran las validaciones de cada campo, agregué la siguiente sintaxis al botón submit :

 <button type="submit" [disabled]="form.invalid">Enviar</button>

Esta fué mi solución:

save(event: any){
    if (this.form.invalid){
      console.error('Formulario Invalido');
    }else{
      console.log(this.form.value);
    }
  }

@Nicobyte Sería mala práctica usar [(ngModel)] en los campos para enviar los datos la ts? y al final NO obtener los datos de get.form.value, si no de dicha variable?