Custom form input component

Question

I want to create a custom form input component, that will work reactively.

I created a component (TS)

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

@Component({
  selector: "app-new-input",
  templateUrl: "./new-input.component.html",
  styleUrls: ["./new-input.component.css"],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NewInputComponent),
      multi: true
    }
  ]
})
export class NewInputComponent implements ControlValueAccessor, OnInit {
  @Input() label: string = "";
  @Input() placeholder: string = "";
  @Input() type: string = "text";

  propagateChange: any = () => {};
  onTouch: any = () => {};
  value: string = "";

  constructor() {}

  ngOnInit() {}

  onChange(event: any) {
    this.value = event.target.value;
    this.propagateChange(this.value);
  }

  writeValue(value: string): void {
    this.value = value ? value : "";
  }
  registerOnChange(fn: any): void {
    this.propagateChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.propagateChange = fn;
  }
  setDisabledState?(isDisabled: boolean): void {}
}

and the HTML

{{label}}

<input matInput [type]="type" [value]="value" [placeholder]="placeholder" (change)="onChange($event)" (keyup)="onChange($event)">

in my app component I have

  searchForm: FormGroup = this.formBuilder.group({
    name: [""]
  });

  constructor(private formBuilder: FormBuilder) {}

and in app component HTML

<form [formGroup]="searchForm">
  <app-new-input formControlName="name"></app-new-input>
</form>

{{searchForm.value | json}}

All this can be found on STACKBLITZ

So, the problem I am having is that the changes from the component input do not propagate to the parent (app component) form

Could somebody tell me what am I doing wrong?

Kurt Hamilton · Accepted Answer · 2020-03-25 09:34:02Z

1

Your mistake is a simple one - you are setting propagateChange in both registerOnChange and registerOnTouched. Instead, assign to onTouch in registerOnTouched.

registerOnTouched(fn: any): void {
  this.onTouch = fn;
}

registerOnTouched is getting called after registerOnChange by the framework, so you are emitting touch events when you are intending to emit change events.

DEMO https://stackblitz.com/edit/angular-ve8sri

answered Mar 25, 2020 at 9:34

Kurt Hamilton

13.7k1 gold badge28 silver badges42 bronze badges

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

2 Comments

Demiro-FE-Architect Over a year ago

Kurt, you save hour and hours of my headache :P Cheers.... I have another question.... I have 2 inputs now on the page... both using same formControlName... one is custom one is direct... check here... stackblitz.com/edit/… .... they are not updating syncronously, why?

Kurt Hamilton Over a year ago

I imagine because that's not how forms are meant to work. This doesn't work with 2 regular inputs either. stackblitz.com/edit/angular-muc59a

Collectives™ on Stack Overflow

Custom form input component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related