use formControlName for custom input component in reactive form

Question

There is a custom input component and it is used in a reactive form with validation:

@Component({
    moduleId: module.id.toString(),
    selector: 'custom-select',
    templateUrl: 'custom-select.component.html',
    styleUrls: ['custom-select.component.css']
})
export class CustomSelectComponent {
    @Input() public items: SelectModel[];
    public model: SelectModel;
    constructor(private customSelectService: CustomSelectService) {
        this.customSelectService.Selected.subscribe((data: SelectModel) => {
            this.model = data;
        });
    }
    public newSelect(select: SelectModel): void {
        this.customSelectService.updateSelected(select);
    }
}

which works fine, I am using custom-select in a reactive form and want to validate it like below:

<custom-select id="country" [items]="selectItems" formControlName="country"></custom-select>
<div *ngIf=" myFrom.controls['country'].invalid && (myFrom.controls['country'].dirty 
             || myFrom.controls['country'].touched) " class="ha-control-alert">
    <div *ngIf="myFrom.controls['country'].hasError('required')">Country is required</div>
</div>

this is how I declare the form in component

this.myFrom = this.formBuilder.group({
    country: [null, Validators.required],
})

but when I add formControlName for validations, it gets error which says No value accessor for form control with name: 'country'. How should I handle this?

value accessor need to be implemented in custom inputs. can you post custom-select — Rajez
– Rajez, Commented Sep 10, 2017 at 14:23
You need to implement ControlValueAccessor, then it will work with both kinds of form. @Rajez that's already in the post — jonrsharpe
– jonrsharpe, Commented Sep 10, 2017 at 14:25
Please read the documentation I already linked to, which tells you which methods to implement and provides example implementations. — jonrsharpe
– jonrsharpe, Commented Sep 10, 2017 at 14:28
blog.thoughtram.io/angular/2016/07/27/… it shows how to create custom form controls — Rajez
– Rajez, Commented Sep 10, 2017 at 14:31

Quethzel Diaz · Accepted Answer · 2021-08-30 10:12:08Z

STEPS

Add the provider for NG_VALUE_ACCESSOR in the decorator
Implement the ControlValueAccessor in the class
Create the onChange function like this onChange = (value: boolean) => {};
Add the registerOnChange, writeValue and registerOnTouched methods of the ControlValueAccessor interface
In the method that will be changed the value of select, call the onChange function passing as parameter the value of select.

        import ...
        import { Component, forwardRef } from '@angular/core';
        import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
        
    
        @Component({
            moduleId: module.id.toString(),
            selector: 'custom-select',
            templateUrl: 'custom-select.component.html',
            styleUrls: ['custom-select.component.css'],
            // STEP 1
            providers: [{
              provide: NG_VALUE_ACCESSOR,
              multi: true,
              useExisting: forwardRef(() => CustomSelectComponent)
            }]
        })
        // STEP 2
        export class CustomSelectComponent implements ControlValueAccessor {
            // STEP 3
            onChange = (value: SelectModel) => {};
            @Input() public items: SelectModel[];
            public model: SelectModel;
            constructor(private customSelectService: CustomSelectService) {
                this.customSelectService.Selected.subscribe((data: SelectModel) => {
                    this.model = data;
                });
            }
            public newSelect(select: SelectModel): void {
                // STEP 5
                this.onChange(select);
                this.customSelectService.updateSelected(select);
            }
            // STEP 4
            registerOnChange(fn: (value: SelectModel) => void): void {
                this.onChange = fn;
            }
            writeValue() {}
            registerOnTouched(){}
        }

Don't forget to add the formControlName in the selector.

Simon_Weaver · Accepted Answer · 2021-07-12 23:30:55Z

2

Add this to the providers of the child:

viewProviders: [{
  provide: ControlContainer, 
  useExisting: FormGroupDirective 
}]

The reason it fails in the first place is it doesn't look in the parent scope for FormGroup, so this just passes it down to the child.

Then you need to trick it into thinking your control has a valueAccessor - which it doesn't need because you just created a sort of 'shim'.

export const NOOP_VALUE_ACCESSOR: ControlValueAccessor = 
{
    writeValue(): void {},
    registerOnChange(): void {},
    registerOnTouched(): void {}
};

Then in the constructor for your child:

constructor(@Self() @Optional() public ngControl: NgControl) 
{
    if (this.ngControl)
    {
        this.ngControl.valueAccessor = NOOP_VALUE_ACCESSOR;
    }
}

Then you can use the formControlName as normal inside the child.

If you need to pass the formControlName from the parent component (which you probably would if it was meant to be a reusable control) just create a string @Input property and do this in the child:

    <input matInput [placeholder]="desc" 
           [formControlName]="formControlName">

edited Jul 12, 2021 at 23:30

answered Jul 12, 2021 at 20:36

Simon_Weaver

147k92 gold badges688 silver badges724 bronze badges

5 Comments

Simon_Weaver Over a year ago

Thanks to stackoverflow.com/a/65177817/16940 for the NOOP portion of this answer.

Matt Over a year ago

Hi @Simon_Weaver. Does this code work if "matInput" is put inside a nested formGroup of the main form? I tried this code and it doesn't seems to work in that case

Hafnernuss Over a year ago

@Simon_Weaver is there any way to get this to work with [(ngModel]) bindings?

Simon_Weaver Over a year ago

@Hafnernuss I actually very rarely use those bindings so I can't immediately say. Hope you figured something out :-)

Kuba Šimonovský Over a year ago

@Matt found a workaround. I had the same issue. Instead of passing the formControlName, you have to pass formControl. Definitely not so convenient, but it works

Collectives™ on Stack Overflow

use formControlName for custom input component in reactive form

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related