page - navigationend angular 4

Angular 2 creando formas reactivas con componentes anidados.

Question

Mi requisito es que necesito crear un formulario con componentes anidados. Estoy creando componentes para cada campo de formulario. Los medios para el cuadro de texto habrá un componente, para el botón de opción habrá otro componente de la misma manera.
<form [formGroup]="myForm">
<textbox-component></textbox-component>
<radioButton-component></radioButton-component>
</form>

Y quiero usar los formularios reactivos para crear este formulario, ya que quiero que mi html esté intacto y tenga las validaciones de mi formulario solo a través de escritura de tipo.

Pero no puedo encontrar ninguna solución, ¿cómo podemos tener formas reactivas anidadas con componentes?

Answer 1

Después de mi investigación y experimentos, encontré una respuesta a mi pregunta, así que respondí yo mismo. Si le ahorra tiempo a alguien, entonces seré feliz.

Si desea crear formas reactivas con componentes anidados, puede hacer lo siguiente:

Aquí estoy creando un formulario con dos componentes anidados uno para cuadro de texto y otro para botón de radio

Tu componente padre puede ser así

<form [formGroup]="myForm">
    <child-textbox-component [parentFormGroup]="myForm">
    </child-textbox-component>
    <child-radio-button-component [parentFormGroup]="myForm">
    </child-radio-button-component>
</form>

Estamos pasando el objeto FormGroup como entrada a los componentes secundarios que se creó en el componente primario como entrada a los componentes secundarios, usarán este objeto FormGroup en su componente para diseñar el control específico de la clase

Los componentes de su hijo serán así

niño-cuadro de texto-componente

<div class="form-group" [formGroup]="parentFormGroup">
  <label>
    {{control.caption}}
  </label>
  <input class="form-control" type="text" [title]="control.toolTip" 
    [attr.maxlength]="control.width" [name]="control.name"
    [value]="control.defaultValue" [formControlName]="control.name"/>
</div>

componente-botón-radio-niño

<div class="form-group" [formGroup]="parentFormGroup">
  <label>
    {{control.caption}}
  </label>
  <div>
      <label *ngFor="let value of control.values; let idx = index"
        class="radio-inline" [title]="control.tooltip">
        <input type="radio" [name]="control.name" [formControlName]="control.name"/>
        {{ value }}
      </label>
  </div>
</div>

Aquí el control es la clase de modelo que contiene los datos que se mostrarán para estos componentes secundarios.

De esta manera, puede tener su formulario para ser generado usando componentes anidados, de modo que no necesita tener su formulario (puede decir, forma grande) en un solo componente. Puede desglosarlo en tantos subcomponentes y la forma será fácil de crear y mantener también utilizando formas reactivas de angular 2. También puede agregar validaciones fácilmente.

Seguí estos enlaces antes de contestar esto.

1. algo similar en

2. formas dinámicas angulares 2

Answer 2

Nota adicional a la respuesta de Mhesh, puede crear esta solución de [parentFormGroup] sin inyectar [parentFormGroup] en el HTML. Puede hacer esto siguiendo esta publicación de desbordamiento de pila en grupos de formularios reutilizables.

Esto es muy bonito.

Ejemplo

Para tomar la solución existente, puedes hacer lo mismo, excepto:

Su componente principal puede ser así, sin que se pasen parámetros adicionales

<form [formGroup]="myForm">
    <child-textbox-component></child-textbox-component>
    <child-radio-button-component></child-radio-button-component>
</form>

Tenga en cuenta, además, puede establecer grupos de formularios como este:

<form [formGroup]="myForm">
    <child-textbox-component></child-textbox-component>
    <child-radio-button-component formGroupName="myGroup"></child-radio-button-component>
</form>

niño-cuadro de texto-componente

<div class="form-group" [formGroup]="controlContainer.control">
  <label>
    {{control.caption}}
  </label>
  <input class="form-control" type="text" [title]="control.toolTip" 
    [attr.maxlength]="control.width" [name]="control.name"
    [value]="control.defaultValue" [formControlName]="control.name"/>
</div>

Para habilitar esto, desea inyectar un ControlContainer en su @Component

@Component({
    moduleId: `MODULE_ID_HERE`,
    selector: "child-textbox-component",
    templateUrl: "childTextbox.component.html",
})
export class ChildTextboxComponent {
    constructor(private controlContainer: ControlContainer, OTHER_PARAMETERS) {
    }
}

Answer 3

Para ampliar la lista de posibles respuestas, este artículo de Alexey Zuev sugiere usar provide:ControlContainer y useExisting:NgForm en el decorador de componentes como una forma de pasar la directiva ngForm a un componente secundario.

@Component({
  selector: ''registrant'',
  templateUrl: ''app/register/registrant.component.html'',
  **viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]**
})

Answer 4

simplemente pase el mismo o sub formGroup en el bloque de formulario con el enlace [formGroup].