example-11.ts

@Component({
  template: `
    <div>
      <label>First name</label>

      <input
        [value]="control.value"
        (valueChange)="onChange($event)"
        (blur)="onTouched()"
        [required]="required"
        [disabled]="control.disabled"
      />
    </div>
  `,
  providers: [
    {
      provide: NG_CONTROL_ACCESSOR,
      useExisting: forwardRef(() => FirstNameInputComponent),
      multi: true,
    },
  ],
})
export class FirstNameInputComponent implements ControlAccessor {
  @Input() required = false;

  readonly control = new FormControl('');
    
  onChange(value: any) {
    this.control.markChanged(true);
    this.control.setValue(value);
  }
  
  onTouched() {
    this.control.markTouched(true)
  }
}