Angular2无法在输入字段中输入文本

时间:2017-03-27 17:10:34

标签: windows angular internet-explorer

我正在使用Angular2,当用户在Windows 7上使用IE11进入我的页面时(这似乎是唯一有问题的组合),他们无法在textboxes / textareas中输入信息。下拉菜单工作就像复选框一样好(虽然您仍然无法在新文本字段中输入信息,但会根据需要显示/隐藏其他字段)。

如果用户点击提交按钮,则所有必填字段显示为需要输入,然后用户可以输入信息。

如果重要,请在输入RECAPTCHA信息后将用户重定向到此页面。如果我从我的应用程序路由模块中取出“canActivate”,它就能正常工作。

这是验证码

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']);
    }
}

以下是生成相关网页的HTML的一部分:

<!-- 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>

1 个答案:

答案 0 :(得分:0)

原来问题是由于RECAPTCHA窗口未关闭(可能是因为我在handleCorrectCaptcha中进行了重定向)。通过添加隐藏按钮并在handleCorrectCaptcha方法中解决我使按钮可见。单击该按钮执行最初在handleCorrectCaptcha方法中完成的重定向。