Question

我有以下组件：

模板

<div class="hide" id="login-contents">
    <form *ngIf="!current_user" role="form" (ngSubmit)="onSubmit()" #loginForm="ngForm">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text"
                   #username
                   id="username"
                   class="form-control"
                   required
                   placeholder="Username">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password"
                   #password
                   id="password"
                   class="form-control"
                   required
                   placeholder="Password">
        </div>
        <button type="submit"
                class="btn btn-block btn-primary"
                [disabled]="!loginForm.form.valid">Login</button>
    </form>
</div>

组件打字稿

@Component({
    selector: 'login-form',
    templateUrl: '/app/form.login.html'
})
export class LoginFormComponent implements OnInit {
    submitted = false;

    ngOnInit() {
        console.log("Form initialised");
    }

    onSubmit(event: any, username: string, password: string) {
        event.preventDefault();
        console.log('onSubmit');
        this.submitted = true;
        return false;
    }
}

根据onInit内容（由于调试原因而添加），表单组件被加载（当然，正如我看到表单本身）。 preventDefault()调用和return false是我尝试阻止按下“登录”按钮时发生的实际提交（以及整页重新加载）。此外，即使表单未填写（因此无效），也不会禁用“登录”按钮。

我已尝试使用<button type="button">代替type="submit"，但onSubmit()方法未被调用。如果我将(ngsubmit)="onSubmit()"移动到按钮(click)="onSubmit()"，则会发生同样的情况（或更不喜欢）。我开始怀疑问题是在某个更深处，甚至在这个组件中都没有。

我可以错过什么？我正在使用2.0.0-rc.6。

Answer 1

使用

 <button type="button" (click)="onSubmit()"

而不是

 <button type="submit"

Answer 2

如果@Gunter的建议不起作用，你可以随时掌控所发生的事情。移除(ngSubmit)="onSubmit()"，然后在<button>中执行

<button (click)="onSubmit()"...

Answer 3

我遇到了问题，提交表单是对名为json-server（https://github.com/typicode/json-server）的开发服务器进行REST调用 - 应用程序正在使用angular-cli＆＃39; s {{}运行1}}命令。尽管写了ng serve，但页面正在重新加载！（无论是来自event.preventDefault()还是<form (ngSubmit)="onSubmit($event)">！）

问题是，json-server非常智能，并修改了你让它服务的json文件！这会触发ng-serve-watcher - 因为我提供的json文件位于我的应用程序代码<button (click)="onSubmit()">文件夹中;）

Answer 4

您可以使用（submit）命令来解决此问题

<form #frm="ngForm" (submit)="submit(value)">
...
</form>

提交Angular2表单而不是运行onSubmit（）方法

4 个答案: