Q: Cách sử dụng mẫu biểu mẫu Angular 2 với ng-content?

Question

Không thể có các phần tử nhập biểu mẫu trong một nội dung ng và có "kết nối" với cá thể ngForm của thành phần gốc không?

Hãy mẫu cơ bản này cho một thành phần cha mẹ:

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

Sau đó, bên trong thành phần con, được đặt bên trong "ng-content", một cái gì đó như thế này:

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

On nộp của hình thức cha mẹ, các điều khiển con không có sẵn, điều này cũng có nghĩa là sự bẩn thỉu/xác thực của bất kỳ thứ gì trong thành phần con không được phản ánh trên biểu mẫu cha mẹ.

Điều gì bị thiếu ở đây?

Answer 1

Có một cơ hội tốt là bạn đã đưa ra giải pháp khác vào thời điểm này nhưng tôi đã tìm ra cách để thực hiện việc này. Hy vọng rằng nó sẽ giúp bạn hoặc người khác.

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

Sau đó, bạn có thể sử dụng nó trong mẫu của bạn như thế này:

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

Khi bạn gửi biểu mẫu, bạn sẽ thấy rằng các projectedInput điều khiển biểu mẫu được thêm vào NgForm.

Lưu ý: Tôi chỉ thử thêm đầu vào dự kiến ​​từ móc vòng đời của AfterViewInit. Nó có thể hoạt động sớm hơn, tôi không chắc. Cũng có thể có một số vấn đề với việc này mà tôi không biết. YMMV.