时间戳

首页 > 解决方案 > 复杂对象的角度自定义输入

angular - 复杂对象的角度自定义输入

问题描述

我有一个包含 3 个字符串成员的对象，我想为它创建一个可重用的输入，因为它在整个应用程序中被多次使用，所以我试图创建一个包含所有 3 个成员输入的自定义输入。但我没有找到方法，因为我发现的其他解决方案不允许我将复杂对象 (MyObject) 槽ngModel传递给我的自定义输入组件。为了增加我的问题的复杂性，我还需要验证我的自定义输入：如果我的自定义输入是required所有 3 个子输入是required. 如果子输入之一被填充，其他 2 个是required，如果子输入之一无效，我的自定义输入也无效。

这是我希望我的代码如何工作的示例（如果可能）

我的对象.ts

export class MyObject {
    name: string;
    category: string;
    areaName: string;
}

MyFormComponent.ts

@Component({
    selector: 'app-my-form'
    template: `
     <form #myForm="ngForm">
       <my-object-input [(ngModel)]="myObj" ></my-object-input>
     </form>`
})
export class MyFormComponent {
    myObj: MyObject;
}

谢谢

标签： angularangular-forms

解决方案

我没有看到通过创建自定义表单控件来解决您的任务的任何问题。遵循这篇解释清楚的文章custom-form-controls-in-angular-2。在本文中，您还可以找到添加自定义验证规则的方法。

一般的想法是在您的自定义表单控件中实现接口，并在自定义方法中ControlValueAccessor添加您的逻辑。writeValue(value: any)

推荐阅读