Question

我最近尝试使用angular 2创建自己的自定义表单控件。自定义控件应具有2个输入，并编辑具有已知结构的现有对象。例如：

class model {
    public fieldOne: number;
    public fieldSec: number;
}

我遵循了我在这里找到的好解释： {{3}}

除了指南没有提到我如何连接之外，它工作正常自定义控件表单验证到使用它的表单。让我们看一个简化的例子：

自定义控件模板看起来像这样：

<form>
    <input [(ngModel)]="existingModel.fieldOne">
    <input [(ngModel)]="existingModel.fieldSec" required>
</form>

我们用它来编辑现有的模型，其值为：

{
    fieldOne: 20,
    fieldSec: undefined
}

我们在我的应用程序中以某种形式使用它，我们需要自定义控件来编辑此模型：

<form #formVar="ngForm">
    <my-custom-control [(ngModel)]="existingModel" required>
    </my-custom-control>
</form>

这种示例适用于我可以编辑模型的应用程序。问题是我想在表单无效时向用户显示，如果我查看formVar.valid，即使existingModel.fieldSec未定义并且在自定义控件表单中对其进行了必需的验证，它也会为true

Answer 1

我不确切知道您的自定义控件的行为，但即使您正在动态编译组件本身，以下解决方案仍然有效。

即使在模板驱动表单（如您的）的情况下，底层引擎仍然可以通过利用反应组件（FormGroup和FormControl）来工作。因此，您始终可以以编程方式更改组和子控件的层次结构，以按预期传播更改。例如，您可以在其他方面公开自定义控件的属性，接受NgForm：

@Input('form') peerForm : NgForm;
@Input('entity') model : any;

然后在视图中设置绑定：

<form #formVar="ngForm">
<my-custom-control [entity]="existingModel" [form]="formVar">
</my-custom-control></form>

您的组件模板应如下所示：

<div>
<input [(ngModel)]="model.fieldOne" #ctrl1="ngModel">
<input [(ngModel)]="model.fieldSec" required #ctrl2="ngModel">
</div>

并且，再次在组件的代码中：

@ViewChild('ctrl1') ngModel1 : NgModel;
@ViewChild('ctrl2') ngModel2 : NgModel;
...
ngAfterViewInit(){
    // assuming the form does exist (TODO: check if set here)
    this.peerForm.control.addControl('entity_fieldOne', this.ngModel1.control);
    this.peerForm.control.addControl('entity_fieldSec', this.ngModel2.control);
}

这应该足够了。请在此处查看Plunker：https://plnkr.co/gb3XroZNoGuZa05e76X0

将自定义表单控件连接到角度2中的父表单验证

1 个答案: