Question

我目前正在处理一个网页，但我似乎无法获得用户名值，我一直在关注“ng-book”的教程，它在那里工作得很好但是当我尝试在我的应用程序无法使用。

signup.component.html

<form role="form">
    <div class="form-content">  
        <div *ngIf="!next"> <!-- hide inputs after a click -->
            <div class="form-group">
                <input type="text" class="form-control input-underline input-lg" id="" placeholder="Username" name="username" #username>
</div> </div> </div> 
<button type="button" class="btn rounded-btn"  *ngIf="!next" (click)="validateNext(username)"> Next </button> 
</form>

我有更多的输入，但我尽量让它变得简单。

signup.component.ts

export class SignupComponent implements OnInit {
signUp: SignUp;
next: boolean;

    constructor() {
        this.signUp = new SignUp();
    }

    validateNext(username: HTMLInputElement) : boolean {
        console.log("works");
        var should = this.signUp.validateNext(username, username, username); //password, confirmPassword);
        return false;
    }
}

signup.model.ts

export class SignUp {
username: string;

validateNext(username: HTMLInputElement, password: HTMLInputElement, confirmPassword: HTMLInputElement) : boolean {
    var result: boolean = false;

    this.username = username.value;
    console.log(this.username);
    return false;
}

错误

SignupComponent.html:69 ERROR TypeError: Cannot read property 'value' of undefined
at SignUp.validateNext (signup.model.ts:21)
at SignupComponent.validateNext (signup.component.ts:23)
at Object.eval [as handleEvent] (SignupComponent.html:70)

Answer 1

尝试使用[hidden]代替ngIf：

<div [hidden]="next"> <!-- hide inputs after a click -->
            <div class="form-group">
                <input type="text" class="form-control input-underline input-lg" id="" placeholder="Username" name="username" #username>
</div> </div> </div>

未定义的HTMLInput元素

1 个答案: