Ufdjrw

I'm trying to test an input that's declared like this:

<input
 #monthElement
 maxlength="2"
 type="text"
 name="month"
 ngModel
 #month="ngModel"
 placeholder="MM"
/>

In some of the functions that are run to validate that the month that's been entered is valid I do a check like this (this is just stubbed out):

isValid(input) 
 return input && this.isValidMonth(input.value) && input.isDirty 

That isValid function is called from the template, and the month variable is passed into it. Everything works as expected.

In my unit tests, I want to test that isValid function, but it doesn't work because input.isDirty is undefined. This is my test function so far:

it('should declare the month input value to be valid if the value is 01', async () => 
 const monthInputElement: DebugElement = fixture.debugElement.query(By.css('input[name="month"]'));
 monthInputElement.nativeElement.value = '01';
 monthInputElement.nativeElement.dispatchEvent(new Event('input'));
 fixture.detectChanges();
 console.log('monthInputElement.nativeElement.value: ', monthInputElement.nativeElement.value);

 console.log('isDirty: ', monthInputElement.nativeElement.dirty);
 const isValid = component.isMonthValid(monthInputElement.nativeElement.value);

 expect(isValid).toBe(true);
);

I have confirmed with that console.log on the nativeElement.value that the value is changed, but nativeElement.isDirty is undefined. How can I test this component and the function so that I have the same element for the test as the template is passing to the function?

Edit

I've also tried to get isDirty working on an input field with reactive forms:

// my.component.ts
public testFormGroup: FormGroup = new FormGroup(
 testField: new FormControl(),
);

<!-- my.component.html -->
<form [formGroup]="testFormGroup">
 <input type="text" formControlName="testField" />
</form>

// my.component.spec.ts
component.testFormGroup.controls.testField.setValue('01');
console.log('testField Value', component.testFormGroup.controls.testField.value);
console.log('testField isDirty', component.testFormGroup.controls.testField.dirty);
fixture.detectChanges();
fixture.whenStable().then(() => 
 console.log('testField isDirty', component.testFormGroup.controls.testField.dirty);
 expect(component.testFormGroup.controls.testField.dirty).toBe(true);
);

The only difference with the reactive form is that .dirty is false and not undefined.