content - Formulario controlado por plantilla anidada Angular2

page title angular 4

Question

Esto es una locura, parece que no hay forma de tener una forma de que una de sus entradas esté en un componente hijo.

He leído todos los blogs y tutoriales y todo, no hay forma de resolver esto.

El problema es cuando un componente hijo tendrá algún tipo de directivas de formulario (ngModel, ngModelGroup o lo que sea ...), no funcionará.

Esto es solo un problema en los formularios basados ​​en plantillas

Este es el plunker :

import { Component } from ''@angular/core'';
@Component({
selector: ''child-form-component'',
template: `
<fieldset ngModelGroup="address">
<div>
<label>Street:</label>
<input type="text" name="street" ngModel>
</div>
<div>
<label>Zip:</label>
<input type="text" name="zip" ngModel>
</div>
<div>
<label>City:</label>
<input type="text" name="city" ngModel>
</div>
</fieldset>`
})
export class childFormComponent{
}
@Component({
selector: ''form-component'',
directives:[childFormComponent],
template: `
<form #form="ngForm" (ngSubmit)="submit(form.value)">
<fieldset ngModelGroup="name">
<div>
<label>Firstname:</label>
<input type="text" name="firstname" ngModel>
</div>
<div>
<label>Lastname:</label>
<input type="text" name="lastname" ngModel>
</div>
</fieldset>
<child-form-component></child-form-component>
<button type="submit">Submit</button>
</form>
<pre>
{{form.value | json}}
</pre>
<h4>Submitted</h4>
<pre>
{{value | json }}
</pre>
`
})
export class FormComponent {
value: any;
submit(form) {
this.value = form;
}
}

Answer 1

De docs oficiales: This directive can only be used as a child of NgForm.

Por lo tanto, creo que puede intentar envolver su componente secundario en diferentes ngForm , y esperar en el resultado del componente primario @Output del componente secundario. Avísame si necesitas más aclaraciones.

ACTUALIZACIÓN: Aquí está Plunker con algunos cambios, convertí el formulario hijo a modelo impulsado, porque no hay forma de escuchar el formulario impulsado por formulario para actualizarlo antes de que se envíe.

Answer 2

He creado una solución utilizando una directiva y un servicio. Una vez que los agregue a su módulo, el único otro cambio de código que debe realizar es a nivel de formulario en las plantillas. Esto funciona con campos de formulario agregados dinámicamente y AOT. También admite múltiples formas no relacionadas en una página. Aquí está el plunker: plunker .

Utiliza esta directiva:

import { Directive, Input } from ''@angular/core'';
import { NgForm } from ''@angular/forms'';
import { NestedFormService } from ''./nested-form.service'';
@Directive({
selector: ''[nestedForm]'',
exportAs: ''nestedForm''
})
export class NestedFormDirective {
@Input(''nestedForm'') ngForm: NgForm;
@Input() nestedGroup: string;
public get valid() {
return this.formService.isValid(this.nestedGroup);
}
public get dirty() {
return this.formService.isDirty(this.nestedGroup);
}
public get touched() {
return this.formService.isTouched(this.nestedGroup);
}
constructor(
private formService: NestedFormService
) {
}
ngOnInit() {
this.formService.register(this.ngForm, this.nestedGroup);
}
ngOnDestroy() {
this.formService.unregister(this.ngForm, this.nestedGroup);
}
reset() {
this.formService.reset(this.nestedGroup);
}
}

Y este servicio:

import { Injectable } from ''@angular/core'';
import { NgForm } from ''@angular/forms'';
@Injectable()
export class NestedFormService {
_groups: { [key: string] : NgForm[] } = {};
register(form: NgForm, group: string = null) {
if (form) {
group = this._getGroupName(group);
let forms = this._getGroup(group);
if (forms.indexOf(form) === -1) {
forms.push(form);
this._groups[group] = forms;
}
}
}
unregister(form: NgForm, group: string = null) {
if (form) {
group = this._getGroupName(group);
let forms = this._getGroup(group);
let i = forms.indexOf(form);
if (i > -1) {
forms.splice(i, 1);
this._groups[group] = forms;
}
}
}
isValid(group: string = null) : boolean {
group = this._getGroupName(group);
let forms = this._getGroup(group);
for(let i = 0; i < forms.length; i++) {
if (forms[i].invalid)
return false;
}
return true;
}
isDirty(group: string = null) : boolean {
group = this._getGroupName(group);
let forms = this._getGroup(group);
for(let i = 0; i < forms.length; i++) {
if (forms[i].dirty)
return true;
}
return false;
}
isTouched(group: string = null) : boolean {
group = this._getGroupName(group);
let forms = this._getGroup(group);
for(let i = 0; i < forms.length; i++) {
if (forms[i].touched)
return true;
}
return false;
}
reset(group: string = null) {
group = this._getGroupName(group);
let forms = this._getGroup(group);
for(let i = 0; i < forms.length; i++) {
forms[i].onReset();
}
}
_getGroupName(name: string) : string {
return name || ''_default'';
}
_getGroup(name: string) : NgForm[] {
return this._groups[name] || [];
}
}

Para usar la directiva en un componente padre con un formulario:

import { Component, Input } from ''@angular/core'';
import { Person } from ''./person.model'';
@Component({
selector: ''parent-form'',
template: `
<div class="parent-box">
<!--
ngForm Declare Angular Form directive
#theForm="ngForm" Assign the Angular form to a variable that can be used in the template
[nestedForm]="theForm" Declare the NestedForm directive and pass in the Angular form variable as an argument
#myForm="nestedForm" Assign the NestedForm directive to a variable that can be used in the template
[nestedGroup]="model.group" Pass a group name to the NestedForm directive so you can have multiple forms on the same page (optional).
-->
<form
ngForm
#theForm="ngForm"
[nestedForm]="theForm"
#myForm="nestedForm"
[nestedGroup]="model.group">
<h3>Parent Component</h3>
<div class="pad-bottom">
<span *ngIf="myForm.valid" class="label label-success">Valid</span>
<span *ngIf="!myForm.valid" class="label label-danger">Not Valid</span>
<span *ngIf="myForm.dirty" class="label label-warning">Dirty</span>
<span *ngIf="myForm.touched" class="label label-info">Touched</span>
</div>
<div class="form-group" [class.hasError]="firstName.invalid">
<label>First Name</label>
<input type="text" id="firstName" name="firstName" [(ngModel)]="model.firstName" #firstName="ngModel" class="form-control" required />
</div>
<child-form [model]="model"></child-form>
<div>
<button type="button" class="btn btn-default" (click)="myForm.reset()">Reset</button>
</div>
</form>
</div>
`
})
export class ParentForm {
model = new Person();
}

Luego en un componente hijo:

import { Component, Input } from ''@angular/core'';
import { Person } from ''./person.model'';
@Component({
selector: ''child-form'',
template: `
<div ngForm #theForm="ngForm" [nestedForm]="theForm" [nestedGroup]="model.group" class="child-box">
<h3>Child Component</h3>
<div class="form-group" [class.hasError]="lastName.invalid">
<label>Last Name</label>
<input type="text" id="lastName" name="lastName" [(ngModel)]="model.lastName" #lastName="ngModel" class="form-control" required />
</div>
</div>
`
})
export class ChildForm {
@Input() model: Person;
}

Answer 3

Leyendo a través de un montón de problemas relacionados con github [1] [2] , no he encontrado una manera sencilla de hacer angular agregar controles de un Component hijo a un ngForm padre (algunas personas también los llaman formas anidadas, entradas anidadas o complejas controles).

Entonces, lo que voy a mostrar aquí es una solución alternativa que funciona para mí , utilizando directivas separadas de ngForm para padres e hijos. No es perfecto, pero me acerca lo suficiente como para detenerme allí.

Declaro mi childFormComponent con una directiva ngForm (es decir, no es una etiqueta de formulario html, solo la directiva):

<fieldset ngForm="addressFieldsForm" #addressFieldsForm="ngForm">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" [(ngModel)]="model.email" name="email" #email="ngModel" required placeholder="Email">
</div>
...

El Componente luego expone el addressFieldsForm como una propiedad, y también se exporta a sí mismo como una variable de referencia de plantilla :

@Component({
selector: ''mst-address-fields'',
templateUrl: ''./address-fields.component.html'',
styleUrls: [''./address-fields.component.scss''],
exportAs: ''mstAddressFields''
})
export class AddressFieldsComponent implements OnInit {
@ViewChild(''addressFieldsForm'') public form: NgForm;
....

El formulario principal puede usar el componente de formulario secundario de esta manera:

 <form (ngSubmit)="saveAddress()" #ngFormAddress="ngForm" action="#">
<fieldset>
<mst-address-fields [model]="model" #addressFields="mstAddressFields"></mst-address-fields>
<div class="form-group form-buttons">
<button class="btn btn-primary" type="submit" [disabled]="!ngFormAddress.valid || !addressFields.form.valid">Save</button>
</div>
</fieldset>
</form>

Tenga en cuenta que el botón Enviar comprueba explícitamente el estado válido tanto en el ngFormAddress como en el de addressFields . De esa manera, al menos puedo componer formas complejas con sensatez, a pesar de que tiene algunas repeticiones.

Answer 4

Otra posible solución alternativa:

@Directive({
selector: ''[provide-parent-form]'',
providers: [
{
provide: ControlContainer,
useFactory: function (form: NgForm) {
return form;
},
deps: [NgForm]
}
]
})
export class ProvideParentForm {}

Simplemente coloque esta directiva en un componente hijo en algún lugar en la parte superior de la jerarquía de nodos (antes de cualquier ngModel).

Cómo funciona : NgModel qualifies la búsqueda de dependencia del formulario principal con @Host (). Por lo tanto, un formulario de un componente primario no es visible para NgModel en un componente secundario. Pero podemos inyectarlo y proporcionarlo dentro de un componente secundario utilizando el código que se muestra arriba.

Answer 5

Una solución simple es proporcionar ControlContainer en la matriz viewProviders de su componente hijo como:

import { ControlContainer, NgForm } from ''@angular/forms'';
@Component({
...,
viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})
export class ChildComponent {}

Ejemplo de Stackblitz

Lea también este artículo que explica por qué está funcionando.

• medium.com/@a.yurich.zuev/…

Actualizar

Si está buscando una forma dirigida por modelo anidado , este es el enfoque similar:

@Component({
selector: ''my-form-child'',
template: `<input formControlName="age">`,
viewProviders: [
{
provide: ControlContainer,
useExisting: FormGroupDirective
}
]
})
export class ChildComponent {
constructor(private parent: FormGroupDirective) {}
ngOnInit() {
this.parent.form.addControl(''age'', new FormControl('''', Validators.required))
}
}

Ejemplo de ejecución de ng

Actualización 2

Si no sabe exactamente qué tipo de ControlContainer envuelve su componente personalizado (por ejemplo, sus controles están dentro de la directiva FormArray), simplemente use la versión común:

import { SkipSelf } from ''@angular/core'';
import { ControlContainer} from ''@angular/forms'';
@Component({
...,
viewProviders: [{
provide: ControlContainer,
useFactory: (container: ControlContainer) => container,
deps: [[new SkipSelf(), ControlContainer]],
}]
})
export class ChildComponent {}

Ejemplo de ejecución de ng