Usaría una forma reactiva que funciona bastante bien, y en cuanto a su comentario:

¿Hay algún otro ejemplo simple para este? Tal vez el mismo ejemplo sin bucles.

Te puedo dar un ejemplo. Todo lo que necesita hacer es anidar un FormGroup y pasárselo al niño.

Digamos que su formulario se ve así y desea pasar el grupo de formularios de address al niño:

 ngOnInit() { this.myForm = this.fb.group({ name: [''], address: this.fb.group({ // create nested formgroup to pass to child street: [''], zip: [''] }) }) }

Luego, en su padre, simplemente pase el grupo de formulario anidado:

 <address [address]="myForm.get('address')"></address>

En su hijo, use @Input para el grupo de formulario anidado:

 @Input() address: FormGroup;

Y en su plantilla use [formGroup] :

 <div [formGroup]="address"> <input formControlName="street"> <input formControlName="zip"> </div>

Si no desea crear un grupo de formularios anidado real, no necesita hacerlo, simplemente puede pasar el formulario principal al secundario, por lo que si su formulario se ve así:

 this.myForm = this.fb.group({ name: [''], street: [''], zip: [''] })

puedes pasar los controles que quieras. Usando el mismo ejemplo anterior, solo nos gustaría mostrar street y zip , el componente secundario permanece igual, pero la etiqueta secundaria en la plantilla se vería así:

 <address [address]="myForm"></address>

Aquí está un

Demo de la primera opción, aquí está la segunda Demo

Más información aquí sobre formularios basados en modelos anidados.

También hay una manera de hacerlo en formularios controlados por plantillas. ngModel crea automáticamente un formulario separado en cada componente, pero puede inyectar el formulario del componente principal agregando esto a su componente:

 @Component({ viewProviders: [{ provide: ControlContainer, useExisting: NgForm}] }) export class ChildComponent

Sin embargo, debe asegurarse de que cada entrada tenga un nombre único. Entonces, si usa * ngFor para llamar a su componente secundario, debe colocar el índice (o cualquier otro identificador único) en el nombre, por ejemplo:

 [name]="'address_' + i"

Si desea estructurar su formulario en FormGroups, use ngModelGroup y

 viewProviders: [{ provide: ControlContainer, useExisting: NgModelGroup }]

en lugar de ngForm y agregue [ngModelGroup]="yourNameHere" a algunos de sus componentes secundarios html que contienen etiquetas.

Desde mi experiencia, este tipo de composición de campos de formulario es difícil de hacer con formularios basados en plantillas. Los campos incrustados en su componente de dirección no se registran en el formulario (objeto NgForm.controls), por lo que no se consideran al validar el formulario.

• Puede crear un componente ControlValueAccessor (que acepta el atributo ngModel) con todas las validaciones, pero luego es difícil mostrar errores de validación y propagar cambios (la dirección se considera como un campo de formulario único con un valor complejo).
• Probablemente podría pasar la referencia del formulario al componente Dirección y registrar sus controles internos en él, pero no lo he intentado y parece ser un enfoque extraño (no lo he visto en ninguna parte).
• Puede cambiar a formularios reactivos (en lugar de basados en plantillas), pasar un objeto de grupo de formulario (que representa una dirección) al componente Dirección, manteniendo la validación en la definición de su formulario. Puede ver un ejemplo aquí https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angular-2