angular 复杂对象的自定义输入

Question

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

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

MyObject.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;
}

谢谢

Answer 1

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

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

angular 复杂对象的自定义输入

angular custom input for complex object

angular

angular-forms