带有组件的模板驱动表单答案

【问题标题】：Template driven forms with components带有组件的模板驱动表单
【发布时间】：2017-05-03 16:42:39
【问题描述】：

如何在ngForm中添加模板驱动控件？

例如，我的表单包含两个组件：

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

如何将“子窗体”中的“栏”控件添加到“父窗体”中的“窗体”？

更新：我发现了类似的feature request。

【问题讨论】：

标签： angular

【解决方案1】：

作为修补程序，您可以使用“RegisterFormModelDirective”：

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

还有这个指令：

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

查看 plunkr 演示：https://plnkr.co/edit/GG2TVHHHGbAzoOP5mIRr?p=preview

如果您有“异常：检查后表达式已更改。先前值：'false'。当前值：'true'”，更改代码：

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

【讨论】：

【解决方案2】：

作为 Alexey 回答的旁注，您应该添加 OnDestroy 处理程序以从表单控件中分离输入。如果您将输入与 *ngIf 一起使用，则尤其需要这样做。

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

【讨论】：