Vorlagengesteuerte Formulare mit Komponenten

Question

Wie Vorlage-gesteuerte Steuerung zu ngForm hinzufügen?

Zum Beispiel habe ich Form mit zwei Komponenten:

@Component({ 
    selector: 'parent-form', 
    template: '<form #form="ngForm"> 
     <input required [(ngModel)]="model.foo" name="foo"> 
     <child-form [model]="model"></child-form> 
    </form>', 
    directives: [ REACTIVE_FORM_DIRECTIVES, ChildFormComponent ] 
}) 
export class ParentFormComponent { 
    public model: MyModel = new MyModel(); 
} 

@Component({ 
    selector: 'child-form', 
    template: '<fieldset> 
     <input required [(ngModel)]="model.bar" name="bar"> 
    </fieldset>', 
    directives: [ REACTIVE_FORM_DIRECTIVES ] 
}) 
export class ChildFormComponent { 
    @Input() public model: MyModel; 
} 

Wie "bar" Steuerung von "Kind Form" auf "Form" in "Mutterform" hinzufügen?

Update: Ich fand ähnliche feature request.

Answer 1

Als Hotfix können Sie "RegisterFormModelDirective" verwenden:

import { Directive, ElementRef, Input, OnInit } from '@angular/core'; 
import { NgModel, NgForm } from '@angular/forms'; 

@Directive({ 
    selector: '[registerForm]' 
}) 
export class RegisterFormModelDirective implements OnInit { 
    private el: HTMLInputElement; 

    @Input('registerForm') public form: NgForm; 
    @Input('registerModel') public model: NgModel; 

    constructor(el: ElementRef) { 
     this.el = el.nativeElement; 
    } 

    ngOnInit() { 
     if (this.form && this.model) { 
      this.form.form.addControl(this.model.name, this.model.control); 
     } 
    } 
} 

Und diese Richtlinien:

<input [(ngModel)]="myValue" minlength="10" #myInput="ngModel" #myComp 
    name="childValue" [registerForm]="form" [registerModel]="myInput"> 

Siehe plunkr Demo: https://plnkr.co/edit/GG2TVHHHGbAzoOP5mIRr?p=preview

Wenn Sie „AUSNAHME haben: Expression hat sich geändert, nachdem Es wurde geprüft. Vorheriger Wert: 'false'. Aktueller Wert: 'true' ", Änderungscode:

public ngOnInit() { 
    if (this.form && this.model) { 
     this.form.form.registerControl(this.model.name, this.model.control); 
     this.form.addControl(this.model); 
    } 
} 

Answer 2

Als eine Randnotiz zu Alexeys Antwort sollten Sie OnDestroy-Handler hinzufügen, um die Eingabe aus dem Formularsteuerelement zu lösen. Dies ist besonders dann erforderlich, wenn Sie die Eingabe mit * ngIf verwenden.

public ngOnDestroy() { 
 
    if (this.form && this.model) { 
 
     this.form.removeControl(this.model); 
 
    } 
 
}