Question

我目前正在尝试向角度2表单添加验证，但出于某种原因，我无法在未填写必填字段时禁用我的提交按钮。这是我的表单模板的代码：

<h1 md-dialog-title>{{title}}</h1>
<form #formCtrl="ngForm">
    <md-dialog-content>
        <md-input-container>
            <input #name md-input placeholder="Name" value="" name="name" focused required>
        </md-input-container>
        <br />
        <md-select #inputtype placeholder="Input type" name="inputtype">
            <md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
            {{inputtype.name}}
            </md-option>
        </md-select>
    </md-dialog-content>
    <md-dialog-actions>
        <button type="submit" md-raised-button color="primary"  [disabled]="!formCtrl.form.valid">Create</button>
    </md-dialog-actions>
</form>

根据几个例子，这应该有效，但按钮永远不会被禁用。我也尝试过＃form;！formCtrl.valid＆＃34;，也无济于事。我尝试过使用非材料设计输入字段，认为这可能会成为问题，但它仍然无法工作。

然后我尝试将以下简单示例复制/粘贴到我的应用程序中，甚至那根本不会起作用： http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

有什么可能阻止它正常工作的想法？

Answer 1

假设您使用的是比Angular 2 final更新的版本：

您需要添加ngModel，它会根据name属性的值绑定表单值。在您的情况下，一个是name="inputtype"，另一个是name="name"。所以你需要添加ngModel来绑定值，你的表单应该按你的意愿工作！：）

所以以下内容应该有效（从代码中删除了一点噪音）：

<form #formCtrl="ngForm" (ngSubmit)="save(formCtrl.value)"> //whatever your submit method is
    <md-dialog-content>
        <md-input-container>
            <input md-input name="name" required ngModel>
        </md-input-container>
        <md-select name="inputtype" required ngModel>
            <md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
            {{inputtype.name}}
            </md-option>
        </md-select>
    </md-dialog-content>
    <md-dialog-actions>
        <button type="submit" md-raised-button color="primary"  [disabled]="!formCtrl.form.valid">Create</button>
    </md-dialog-actions>
</form>

不记得何时引入，这应该在 changelogs 的某个地方找到，这对于偶尔看一下很有用，因为Angular是在每个版本中几乎不断调整内容。因此，随后将更新更新和语法：）

基于Angular2模板的表单验证不起作用

1 个答案: