0

Tengo en mi componente principal

<form novalidate (ngSubmit)="save()" [formGroup]="form">
  <div class="grid">
    <div class="col-2 right"><label class="defaultLabel">Nombre: </label></div>
    <div class="col-3"><input type="text" formControlName="name1" pInputText /></div>
  </div>

 <app-description-form [form]="form"></app-description-form>
</form>


this.form = this.fb.group({
  name1: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
  name2: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],

save(): void {
  console.log(this.form.value)
}

y en el segundo componente

<div class="grid" [formGroup]="form">
  <div class="col-2 right"><label class="defaultLabel">Nombre 2: </label></div>
  <div class="col-3"><input type="text" formControlName="name2" pInputText /></div>
</div>

  @Input()
  form: FormGroup;

  constructor(private fb: FormBuilder) {

   }

Pero esto no me funciona correctamente, me gustaría en el this.form.value tener el valor de esos 2 campos

2
  • Pásale el form a través de un input a tu segundo componente y puedes hacer lo mismo que en el primero con un [formGroup] en un div.
    – Benito-B
    el 7 sep. 2022 a las 13:28
  • he modificado como me indicas pero sigue sin funcioanr correctamente, es decir en el console.log this.form.value no me sale valor para name2
    – sirdaiz
    el 7 sep. 2022 a las 14:15

1 respuesta 1

0

Con tu codigo construyendo el formulario desde ngOnInit(){} o desde el constructor(){} la consola me muestra los dos campos con el componente hijo formando parte del modulo principal. Por ejemplo nest en campo padre dan campo hijo consola muestra

{
    "name1": "nest",
    "name2": "dan"
}

Padre:

form: FormGroup;
constructor(private fb:FormBuilder) {}
 public ngOnInit(): void {
    this.bindForm();
}
bindForm() {
    this.form = this.fb.group({
      name1: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
      name2: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
    })
save(): void {
    console.log(this.form.value)
  }

Vista Padre:

<form novalidate (ngSubmit)="save()" [formGroup]="form">
  <div class="grid">
    <div class="col-2 right"><label class="defaultLabel">Nombre: </label></div>
    <div class="col-3"><input type="text" formControlName="name1" pInputText /></div>
  </div>
  <app-hijo-viewer  [form]="form"></app-hijo-viewer>
  <button type="submit">Submit</button>
</form>

Hijo:

 @Input()
  form: FormGroup;

Vista Hijo:

<div class="grid" [formGroup]="form">
    <div class="col-2 right"><label class="defaultLabel">Nombre 2: </label></div>
    <div class="col-3"><input type="text" formControlName="name2" pInputText /></div>
  </div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.