0

Tengo lo siguiente

.html

<input type="text" formControlName="name" pInputText />
<input type="text" formControlName="address.name" pInputText />
<input type="text" formControlName="adress.code" pInputText />

.ts

form: FormGroup;

constructor(private fb: FormBuilder, private confirmationService: ConfirmationService) {
this.form = this.fb.group({
  name: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
  workshop: new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]),
    code: new FormControl('', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]),
  })
});

No me sale ningún error pero no cargan otros elementos de la vista, si elimino los inputs del address me funciona y carga la vista sin problemas

1 respuesta 1

1

Lo primero tienes una incongruencia en cuanto a los nombres. En el template estas usando address.name y address.code, pero en el FormGroup de la clase esos controles los tienes dentro de un grupo llamado workshop.

Dicho esto, en el template tienes que mantener la estructura definida en el FormGroup de la clase. Este tiene la siguiente estructura:

form = {      // FormGroup
  name,         // FormControl
  workshop: {   // FormGroup
    name,         // FormControl
    code          // FormControl
  }
}

Por tanto en tu template los debes definir de la siguiente manera (simplificado):

<form [formGroup]="form">
  <input formControlName="name">
  <fieldset formGroupName="workshop">
    <input formControlName="name">
    <input formControlName="code">
  </fieldset>
</form>

un saludo

1
  • gracias, el fieldset fue la solución
    – sirdaiz
    el 5 sep. 2022 a las 13:18

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.