Creating custom form input in Angular

Question

I'm creating my own form builder in angular. I have html code:

<form [formGroup]="formGroup">
    <my-input-field
            [field]="{type:'text'}"
            [formControlName]="'first'"></my-input-field>
</form>

I don't know how to in MyInputFieldComponent fetch parent's formGroup (I don't want to pass it as extra property. Less boilerplate is better). I can fetch parentElement itself, but how to get parent component to get it's formGroup ?

constructor(protected elementRef: ElementRef) {}

ngOnInit() {
   console.log(this.elementRef.nativeElement.parentElement);
}

Hmm... Why would you want to do that? Get the value of the formgroup? Why not pass the name as an @input itself? What's stopping you and what's the usecase/need? — Gary
– Gary, Commented Mar 13, 2018 at 10:53
Without that I would have to give extra attribute in all my-input-field. It's redundant in my opinion. formControlName directive knows if parent component has formGroup so it has to be possible. — piernik
– piernik, Commented Mar 13, 2018 at 11:14

Rubén Soler · Accepted Answer · 2018-03-13 11:50:56Z

3

Yo don't need to inject the parent component for this, in this case the best option is implement the ControlValueAccessor interface.

https://angular.io/api/forms/ControlValueAccessor

You can see how to do it here: https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

ControlValueAccessor is the interface to create custom form fields in Angular, if you implement it in your component @angular/forms can use it as a html native input, accessing the values with ngModel or formControlName

edited Mar 13, 2018 at 11:50

answered Mar 13, 2018 at 11:42

Rubén Soler

1,1879 silver badges24 bronze badges

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

1 Comment

piernik Over a year ago

I could use that aproach. Thanks

Collectives™ on Stack Overflow

Creating custom form input in Angular

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related