प्रश्न: एनजी-सामग्री के साथ कोणीय 2 टेम्पलेट फॉर्म का उपयोग कैसे करें?

Question

क्या एनजी-सामग्री के भीतर फॉर्म इनपुट तत्व होना संभव नहीं है और क्या यह मूल घटक के ngForm उदाहरण में "कनेक्ट" है?

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

तो बच्चे घटक है, जो इस तरह के अंदर "एनजी-सामग्री", कुछ डाल दिया है अंदर:

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

पर की प्रस्तुत

एक माता पिता के घटक के लिए इस बुनियादी टेम्पलेट ले लो अभिभावक रूप, बाल नियंत्रण उपलब्ध नहीं हैं, जिसका अर्थ यह भी है कि बच्चे के घटक में जो कुछ भी है, वह गंदे/सत्यापन माता-पिता के रूप में दिखाई नहीं देता है।

यहां क्या गुम है?

Answer 1

एक अच्छा मौका है कि आप इस बिंदु पर एक और समाधान के साथ आए हैं, लेकिन मुझे बस ऐसा करने का एक तरीका पता चला। उम्मीद है कि यह आपको या किसी और की मदद करेगा।

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

तो फिर तुम इस तरह अपने टेम्पलेट में इसका इस्तेमाल कर सकते हैं:

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

जब आप फ़ॉर्म सबमिट करेंगे, आपको लगता है कि projectedInput प्रपत्र नियंत्रण NgForm में जोड़ा जाता है देखेंगे।

नोट: मैंने केवल AfterViewInit जीवन चक्र हुक से अनुमानित इनपुट जोड़ने का प्रयास किया। यह पहले काम कर सकता है, मुझे यकीन नहीं है। ऐसा करने में कुछ समस्याएं हो सकती हैं जिन्हें मुझे पता नहीं है। YMMV।