InputNumber step buttons appear but don't increment/decrement value with FormControl

[Staticyassine]

Issue

The increment/decrement step buttons on tuiInputNumber appear correctly, but clicking them doesn't update the form control value. The buttons are visible and clickable, but the value remains unchanged.

Environment

• Taiga UI Version: 4.64.0
• Angular Version: 20.3.13
• Package: @taiga-ui/kit
• Change Detection Strategy: OnPush

Current Implementation

I'm using tuiInputNumber with a reactive form control inside a ControlValueAccessor wrapper:

@component({
selector: 'app-number-input-field',
standalone: true,
imports: [ReactiveFormsModule, TuiInputNumber, ...TuiTextfield, TuiLabel],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NumberInputFieldComponent),
multi: true,
},
],
})
export class NumberInputFieldComponent implements ControlValueAccessor {
@input() step = 1;
readonly control = new FormControl<number | null>(null);

private readonly cdr = inject(ChangeDetectorRef);
private readonly destroyRef = inject(DestroyRef);

private onChange: (value: number | null) => void = () => {};
public onTouched: () => void = () => {};

constructor() {
this.control.valueChanges
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(value => {
this.onChange(value);
this.cdr.markForCheck(); // Added to fix OnPush issue
});
}

writeValue(value: number | null): void {
this.control.setValue(value, { emitEvent: false });
this.cdr.markForCheck();
}

// ... other CVA methods
}

Number Input
<input
tuiInputNumber
[formControl]="control"
[min]="0"
[max]="100"
[step]="step"
placeholder="Enter a number..."
/>
## Expected Behavior

When clicking the increment/decrement buttons:

1. The form control value should increase/decrease by the step amount
2. The input field should display the new value
3. The valueChanges observable should emit the new value
4. The parent form should receive the updated value via ControlValueAccessor

Actual Behavior

• ✅ Step buttons appear correctly (selector input[tuiInputNumber][step] matches)
• ✅ Buttons are clickable (not disabled)
• ❌ Clicking buttons does NOT update the form control value
• ❌ Input field value remains unchanged
• ❌ valueChanges does not emit
• ❌ Parent form does not receive updates

What I've Tried

1. ✅ Added markForCheck() in valueChanges subscription - no effect
2. ✅ Verified step attribute is present in DOM - it is
3. ✅ Checked that TuiInputNumberStep component is instantiated - it is
4. ✅ Verified form control is enabled - it is
5. ✅ Tested with static step="1" - same issue
6. ✅ Tested with [(ngModel)] instead of [formControl] - works correctly!

Key Finding

The step buttons work correctly when using [(ngModel)]:

<input
tuiInputNumber
[(ngModel)]="value"
[step]="1"
/>But they don't work when using [formControl]:

<input
tuiInputNumber
[formControl]="control"
[step]="1"
/>## Investigation

Looking at the TuiInputNumberStep source code, the onStep() method calls:
ipt
onStep(step) {
const current = this.input.value() ?? 0;
this.input.setValue(tuiClamp(current + step, this.input.min(), this.input.max()));
}The TuiInputNumberDirective.setValue() method should update the form control, but it seems like there's a disconnect when using FormControl instead of ngModel.

Questions

1. Is there a known issue with step buttons and FormControl in Taiga UI v4?
2. Should I be using a different approach when wrapping tuiInputNumber in a ControlValueAccessor?
3. Is there a specific way to ensure the step component's setValue() properly updates the form control?
4. Are there any workarounds or recommended patterns for this use case?

Minimal Reproduction

escript
@component({
selector: 'app-test',
standalone: true,
imports: [ReactiveFormsModule, FormsModule, TuiInputNumber, ...TuiTextfield, TuiLabel],
template: `

With FormControl (doesn't work)
<input
tuiInputNumber
[formControl]="control"
[step]="5"
[min]="0"
[max]="100"
/>

Value: {{ control.value }}

<tui-textfield>
  <label tuiLabel>With ngModel (works)</label>
  <input
    tuiInputNumber
    [(ngModel)]="ngModelValue"
    [step]="5"
    [min]="0"
    [max]="100"
  />
</tui-textfield>
<p>Value: {{ ngModelValue }}</p>

`
})
export class TestComponent {
control = new FormControl<number | null>(null);
ngModelValue: number | null = null;
}Any guidance would be greatly appreciated! 🙏

[Staticyassine]

it‘s resolved I was missing provideEventPlugins() in main