Error al alternar el nombre del grupo

1

Tengo la siguiente forma:

currentLang: string = "en-Gb";

this.myForm = new FormGroup({
    Languages: new FormGroup({
        en-Gb: new FormGroup({
            first: new FormControl('Nancy', Validators.minLength(2)),
            last: new FormControl('Drew', Validators.required)
        }),
        de-De: new FormGroup({
            first: new FormControl('Nancy', Validators.minLength(2)),
            last: new FormControl('Drew', Validators.required)
        }),
    })
});

switchLang(newLang) {
    this.currentLang = newLang;
}

Y el código de la plantilla aquí:

<form [formGroup]="myForm" novalidate (ngSubmit)="submit(myForm)" class="generalForm">

    <div formGroupName="Languages">
        <ol formGroupName="{{currentLang}}">
            <li>
                <label>Firstname:</label>
                <input id="first" type="text" formControlName="first">
            </li>
            <li>
                <label>Lastname:</label>
                <input id="last" type="text" formControlName="last">
            </li>
        </ol>
    </div>

</form>

<button (click)="switchLang('de-De')">Switch to German</button>

Pero cuando presiono el botón "cambiar al botón alemán" mis campos todavía se basan en los valores de "en-Gb". ¿Cómo puedo hacer que esos campos pasen al modo alemán? Al cambiar el idioma, hubiera esperado que los campos se quedaran en blanco para poder completar los campos para la vista en alemán.

  • 0
    Creo que esto se debe a que se usa el mismo formControlName . Puede crear los cuatro campos de texto y alternar los dos pares según el idioma seleccionado. – 
  • 0
    @ ranjeet8082 gracias, parece que tiene que duplicar demasiado el código. Si hubiera dicho 30 idiomas diferentes, esto podría ser bastante inmanejable. – 
Mostrar mas 2 comentarios
Etiquetas de preguntas:
angular

1 respuesta

1
Mejor respuesta

Encontré la respuesta al final en esta publicación = Angular: el cambio de valor de formGroupName no actualiza el formulario

Parece que en el momento en que hace que el nombre del grupo de formulario sea dinámico de alguna manera, debe modificar los campos para que sean específicos para ese objeto (que no sería el caso si fuera estático). En mi caso tuve que cambiar los campos a esto:

<input id="first" type="text" [formControl]="myForm.controls['Languages'].controls[currentLang].controls['first']">
<input id="first" type="text" [formControl]="myForm.controls['Languages'].controls[currentLang].controls['last']">
La respuesta fue
Fuente
Comunidad Progexpertos
Arriba
Menu