Question

我想使用角度组件构建一个身份验证表单，并尝试如下：

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

Answer 2

我知道这是一篇较旧的帖子，但是我想添加一些东西来帮助将来的其他人在我找到这个时对我有所帮助。我使用了一个非常类似的场景，这就是我找到的

首先，您正在使用

<material-button type="submit">Login</material-button>

根据我在此处找到的内容： https://github.com/dart-lang/angular_components/issues/132

材质按钮实际上不受html按钮的支持。它是一个div下面。所以让它成为一个类型=“提交”

是不可行的

因此，如果您想使用材质按钮，请执行以下操作：

<material-button raised (trigger) = "onSubmit()">Login</material-button>

并从表单元素中排除（ngSubmit）=“onSubmit（）”，如下所示：

<form #loginCtrl="ngForm">

或者，如果你想保持表单元素的方式，那么你需要使用一个接受type =“submit”的html按钮，如下所示：

<form (ngSubmit)="onSubmit()" #loginCtrl="ngForm">
  <button type="submit">Submit</button>
</form>

希望这有助于其他人!!

如何使用角度组件构建为表单

2 个答案: