Question

我有一个包含3个字符串成员的对象，并且我想为其提供可重用的输入，因为它在整个应用程序中已多次使用，因此，我试图创建一个包含所有3个成员输入的自定义输入。但是我没有找到解决方法，因为我发现的其他解决方案不允许我通过ngModel的复杂对象（MyObject）通过我的Custom Input组件。为了增加我的问题的复杂性，我还需要验证我的自定义输入：如果我的自定义输入为required，则所有3个子输入均为required。如果其中一个子输入被填充，另外两个为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)方法中。

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

1 个答案: