example - P: ¿Cómo utilizar el formulario de plantilla Angular 2 con ng-content?

ng-content angular 7

Question

¿No es posible tener elementos de entrada de formulario dentro de un contenido ng y tener que "conectarse" a la instancia ngForm del componente principal?

Tome esta plantilla básica para un componente padre:

<form (ngSubmit)="onSubmit(editForm)" #editForm="ngForm" novalidate>               
<ng-content></ng-content>
<button type="submit">Submit</button>
</form>

Luego dentro del componente hijo, que se coloca dentro de "ng-content", algo como esto:

<input type="text" [(ngModel)]="user.firstName" #firstName="ngModel" name="firstName" required minlength="2">

Al enviar el formulario principal, los controles secundarios no están disponibles, lo que también significa que la validación / validación de lo que esté en el componente secundario no se refleja en el formulario principal.

¿Qué falta aquí?

Answer 1

Existe una buena posibilidad de que haya encontrado otra solución en este momento, pero simplemente he descubierto una manera de hacerlo. Esperemos que te ayude a ti oa alguien más.

import { NgModel } from ''@angular/forms'';
import { Component, ContentChildren, ViewChild, QueryList, AfterViewInit } from ''@angular/core'';

@Component({
  selector: ''my-custom-form'',
  template: `
    <form (ngSubmit)="onSubmit(editForm)" #editForm="ngForm" novalidate>               
      <ng-content></ng-content>
      <button type="submit">Submit</button>
    </form>
  `,
})
export class MyCustomFormComponent implements AfterViewInit {
  @ContentChildren(NgModel) public models: QueryList<NgModel>;
  @ViewChild(NgForm) public form: NgForm;

  public ngAfterViewInit(): void {
    let ngContentModels = this.models.toArray();
    ngContentModels.forEach((model) => {
      this.form.addControl(model);
    });
  }

  public onSubmit(editForm: any): void {
    console.log(editForm);
  }
}

Entonces puedes usarlo en tu plantilla así:

<my-custom-form>
  <input name="projectedInput" ngModel>
</my-custom-form>

Cuando envíe el formulario, verá que el control de formulario projectedInput se agrega a NgForm.

Nota: solo intenté agregar las entradas proyectadas desde el gancho del ciclo de vida de AfterViewInit. Puede que funcione antes, no estoy seguro. También puede haber algunos problemas con esto que no conozco. YMMV.