#Reusable text input Angular 17

11 messages · Page 1 of 1 (latest)

gaunt spoke
stoic coyote
#

👋

#

There are a few things u are missing.

#
<text-input label="Username" type="text" formControlName="username" errorMessage="Username is required"></text-input>
#

Drop the onValueChange, but use formControlName

proud vessel
#

@gaunt spoke please review our #rules and do not post the same question in multiple channels.

stoic coyote
#

You also should remove the output in the ControlValueAccessor

#

and use

#
export class TextInput implements OnInit, ControlValueAccessor {
  @Input() label: string = '';
  @Input() placeholder: string = '';
  @Input() type = 'text';
  @Input() errorMessage: string = '';
  control: FormControl = new FormControl('', Validators.required);

  ngOnInit(): void {}

  // Implement ControlValueAccessor methods
  writeValue(value: string): void {
    this.control.setValue(value);
  }
  registerOnChange(fn: any): void {
    this.control.valueChanges.subscribe(fn);
  }
  registerOnTouched(fn: any): void {
    // Add implementation if needed
  }
  setDisabledState(isDisabled: boolean): void {
    // Add implementation if needed
  }
}
#

Not how I;d do it, but that works.

#

But yes, that just wasted my time as @proud vessel already did fix your sample 😦