Update formControl by setting input-value in an angular test (jasmine)

I'm trying so simulate an user input to a form field in my angular test. I want to test if the corresponding formControl looks right after a user input. My component looks like this:

@Component({
template: `
    <div>
        <input [formControl]="formControl"></input>
    </div>
`
export class TextFieldComponent {
    @Input() formControl;
}

My test look like this:

describe("Text Field Component", () => {
    let fixture: ComponentFixture<TextFieldComponent>;
    let component: TextFieldComponent;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [TextFieldComponent],
            schemas: [NO_ERRORS_SCHEMA],
        });

        TestBed.compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(TextFieldComponent);
        component = fixture.componentInstance;
    });

    it("should update value in formControl", () => {
        component.formControl = new FormControl("old value");
        fixture.detectChanges();

        const inputElement = fixture.nativeElement.querySelector("input");        
        inputElement.nativeElement.value = "new value";
        inputElement.nativeElement.dispatchEvent(new Event("input"));
        fixture.detectChanges();

        expect(component.formControl.value).toBe("new value");
    });
});

This fails with Expected 'old value' to be 'new value' Any ideas why? I thought that setting the value and then emitting an input-event should update the formControl.

I have also tried (with no success):

fixture.whenStable().then(() => {
    expect(component.formControlRef.value).toBe("ab");
});

I know that I could simply call formControl.setValue() instead of setting the value directly in the input field. But I am interested in going as close to a "real" user-input directly into the field. Thanks!