Angular2 cannot enter text into input field - windows

Question

I am using Angular2 and when users go to my page using IE11 on Windows 7 (which appears to be the only combination that has issues) they cannot enter information into the textboxes/textareas. The drop-downs work just fine as do the checkboxes (which will show/hide additional fields as needed although you still cannot enter information into the new text fields).
If the user clicks the submit button all the required fields show as needing input and then the user can enter the information.
If it matters, the users are redirected to this page after enter RECAPTCHA information. If I take out the "canActivate" from my app routing module it works.
Here is the captcha code
import { Component } from '#angular/core';
import {
Router,
NavigationExtras
} from '#angular/router';
import { CaptchaService } from '../../utils/captchaguard/captcha.service';
import { ReCaptchaComponent } from 'angular2-recaptcha/lib/captcha.component';
#Component({
moduleId: module.id,
templateUrl: 'captcha.component.html'
})
export class CaptchaComponent {
message: string;
constructor(
public captchaService: CaptchaService,
public router: Router) {
//this.captchaService.isLoggedIn = true; //Uncomment out for testing
this.captchaService.isLoggedIn = false; //Uncomment out for live
}
handleCorrectCaptcha(userResponseKey: any) {
let redirect = this.captchaService.redirectUrl ? this.captchaService.redirectUrl : '/admin';
let redirectParts = redirect.split('/');
let appendID = redirect[redirect.length - 1];
//let appendID = 0;
this.captchaService.isLoggedIn = true;
//this.router.navigate(['/studyfd' + appendID]);
this.router.navigateByUrl('/studyfd' + appendID);
//this.router.navigate(['/studytest/0']);
}
}
Here is a portion of the HTML that generates the page in question:
<!-- First and Last Name -->
<div class="row">
<div class="col-sm-6">
First Name, Last Name
</div>
<div class="col-sm-3">
<input type="text" name="FirstName" id="firstname" required="required"
placeholder="First Name" class="required "
[(ngModel)]="user.FirstName" *ngIf="!readonly" />
<label *ngIf="readonly">{{user.FirstName}}</label>
</div>
<div class="col-sm-3">
<input type="text" name="LastName" id="lastName" required="required"
placeholder="Last Name" [(ngModel)]="user.LastName" *ngIf="!readonly"
class="required " />
<label *ngIf="readonly">{{user.LastName}}</label>
</div>
</div>

Answer 1

Turns out the issue was due to the RECAPTCHA window not closing (probably because of the redirect I was doing in handleCorrectCaptcha). Resolved by adding a hidden button and in the handleCorrectCaptcha method I made the button visible. Clicking on the button performed the redirect that was originally done in the handleCorrectCaptcha method.