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

Question

我目前正在尝试向 Angular 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>

根据几个示例，这应该可以工作，但是该按钮永远不会被禁用。我也试过“！formCtrl.valid”，也无济于事。 我尝试使用非材料设计输入字段，认为这可能是问题所在，但它仍然不起作用。

然后我尝试将以下简单示例复制/粘贴到我的应用程序中，但即使这样也根本行不通： 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 几乎一直在不断地调整东西在每个版本中。因此，遵循这将使您随时了解更改和语法:)