angular custom input for complex object

Question

i have a object with 3 string members and I want to make a reusable input for it because it is used many times all over the application, so I'm trying to create a Custom Input that contains all 3 member's inputs. But i didn't found out a way, because other solutions that I've found don't let me to pass a complex object (MyObject) trough ngModel to my Custom Input component. To add complexity to my Question I need also to validate my Custom Input: if my custom input is required all of 3 sub-inputs are required. if one of sub-inputs gets filled the other 2 are required, if one of sub-inputs is invalid my Custom Input is invalid too.

Here an example of how I'd want my code to work (If possible)

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

Thanks

You need to implement ControlValueAccessor to create a custum input that takes in ngModel or formControl. Refer this blog blog.thoughtram.io/angular/2016/07/27/… — Renil Babu
– Renil Babu, Commented Aug 13, 2018 at 11:16

shohrukh · Accepted Answer · 2018-08-11 22:53:56Z

1

I don't see any issues to solve your task by creating Custom Form Control. Follow this well-explained article custom-form-controls-in-angular-2. In this article you also can find the way of adding custom validation rules.

The general idea is to implement ControlValueAccessor interface in your custom form control and add your logic inside the custom writeValue(value: any) method.

edited Aug 11, 2018 at 22:53

answered Aug 11, 2018 at 22:38

shohrukh

3,2094 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular custom input for complex object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related