angular - 如何使用 Angular 组件构建表单

Question

我想用 Angular 组件构建一个身份验证表单并尝试如下:

<form (ngSubmit)="onSubmit()" #loginCtrl="ngForm">
    <div class="input">
         <material-input type="text"
                        class="login"
                        required
                        floatingLabel
                        label="User"
                        [(ngModel)]="login.user"
                        ngControl="user"
                        #user="ngForm"></material-input>
    </div>
    <div class="input">
        <material-input
                class="login"
                type="password"
                floatingLabel label="Password"
                [(ngModel)]="login.password">
        </material-input>
    </div>
    <div class="input">
        <material-input
                class="login"
                type="text"
                floatingLabel
                label="Language"
                [(ngModel)]="login.language">
        </material-input>
    </div>
    <div class="input">
        <material-button
                type="submit"
                raised
                class="btn-blue">
            Login
        </material-button>
    </div>
</form>

onSubmit 函数根本不会被触发。我做错了什么？

Answer 1

我猜你所做的应该有用。作为解决方法，您可以尝试

    <material-button
            (click)="loginCtrl.submit()"
            raised
            class="btn-blue">
        Login
    </material-button>