How do I create a custom Reactive Form Element?

Question

I'm working with Reactive Forms in Angular and I'm trying to create a custom form element so I can use buttons with my form. I'm trying to follow a tutorial from Alligator.io, but it isn't clear how to integrate this into my component. Currently I'm getting the following error.

ERROR Error: No value accessor for form control with name: 'coverage_for_domestic_partners'

Below is my code any help would be appreciated.

// HTML

<div class="button-group" [formGroup]="group">
    <button
        *ngFor="let option of config.options"
        class="button button--toggle"
        [ngClass]='{"is-active": option.selected}'
        (click)="select($event, option)"
        [formControlName]="config.key">
        <div class="button-content">{{option.key}}</div>
    </button>
</div>

// Component

import { Component, OnInit, Input, forwardRef, HostBinding } from '@angular/core';
import { FormGroup, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
 selector: 'z-toggle-group',
 templateUrl: './z-toggle-group.component.html',
 styleUrls: ['./z-toggle-group.component.scss'],
 providers: [
{
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => ZToggleGroupComponent),
  multi: true
}
  ]


 })
export class ZToggleGroupComponent implements OnInit, ControlValueAccessor {

@Input() config;
@Input() group: FormGroup;

@Input() disabled = false;
  @HostBinding('style.opacity')
  get opacity() {
    return this.disabled ? 0.25 : 1;
  }

clicked;

onChange = (rating: number) => {};
onTouched = () => {};

constructor() { }

ngOnInit() {
    // console.log('form', this.group)
      this.group.get(this.config.key).valueChanges.subscribe(value => {
        console.log('formValue', value);
    })
}

    writeValue(obj: any): void {
        throw new Error("Method not implemented.");
    }
    registerOnChange(fn: any): void {
        throw new Error("Method not implemented.");
    }
    registerOnTouched(fn: any): void {
        throw new Error("Method not implemented.");
    }
    setDisabledState?(isDisabled: boolean): void {
        throw new Error("Method not implemented.");
    }

select($event, option) {
    this.clicked = $event;
    this.group.get(this.config.key).patchValue(option.value, {onlySelf: true});

    this.config.options.forEach(option => {
        option.selected = false;
    })

    option.selected = true;
}

}

Where is writeValue(obj: any): void registerOnChange(fn: any): void registerOnTouched(fn: any): void implementation? — Thomaz Capra
– Thomaz Capra, Commented Jan 14, 2019 at 18:55
Sorry, I forgot to copy and paste that initially. I'm not sure how to integrate those into my function? — London804
– London804, Commented Jan 14, 2019 at 18:58

Thomaz Capra · Accepted Answer · 2019-01-14 20:01:04Z

You need to implement ControlValueAccessor interface, to do this, you will need to implement this methods:

interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

You can see my example implementation right here.

When your component's value changes, you have to call OnChange method, that you registered in your ts file.

You can see my call example here.

After that, you can use your component by its tag selector (in your case z-toggle-group) inside a form, and you will be able to use formControlName.

<div class="button-group" [formGroup]="group">
    <button
        *ngFor="let option of config.options"
        class="button button--toggle"
        [ngClass]='{"is-active": option.selected}'
        (click)="select($event, option)">

        <z-toggle-group [formControlName]="config.key"></z-toggle-group>

        <div class="button-content">{{option.key}}</div>
    </button>
</div>

Here is your code working.

Thanks for your answer, but this is a little confusing. I'm suppose to add <z-toggle-group> to itself?

Collectives™ on Stack Overflow

How do I create a custom Reactive Form Element?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related