S: ng içeriğiyle Açısal 2 şablon formu nasıl kullanılır?

Question

Bir ng içeriğinde form giriş öğelerinin olması ve ana bileşenin ngForm örneğine "bağlanması" mümkün mü?

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

O zaman bu gibi içeri "ng-içerik", bir şey konur çocuk bileşeni, iç:

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

On teslim

bir ebeveyn bileşeni için bu temel şablonu alın Ebeveyn formu, çocuk kontrolleri mevcut değildir, bu da çocuk bileşenindeki her şeyin kirli/onaylanmasının ana forma yansıtılmadığı anlamına gelir.

Burada eksik olan nedir?

Answer 1

Bu noktada başka bir çözüm bulduğunuz için iyi bir şans var ama bunu yapmanın bir yolunu buldum. Umarım size veya başka birine yardımcı olacaktır.

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); 
    } 
} 

Sonra böyle şablonunuzda kullanabilirsiniz:

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

formu gönderirken, projectedInput form denetimi NgForm eklendiğini göreceksiniz.

Not: Sadece çıkarılan girdileri AfterViewInit yaşam döngüsü kancasından eklemeye çalıştım. Daha erken işe yarayabilir, emin değilim. Bunu yapmamanın bazı sorunları olabilir. YMMV.