Angular 2表单验证不起作用

Question

我有一个使用Angular 2（RC.4）构建的应用程序，现在我遇到了表单验证的问题。

以下是我在模板中的表单代码：

<div class='modal'>
    <form #modalForm='ngForm'>
      <div class='heading'>
        <h4>{{_title}}</h4>
        <div class='close-icon' (click)='close()'></div>
      </div>
      <div class='body'>
        <input type='text' name='projectName' [(ngModel)]='projectName' required placeholder='Give your project a name...' id='focusOnMe'>
      </div>
      <div class='controls'>
        <button class='btn btn-secondary' (click)='close()'>Cancel</button>
        <button type='submit' class='btn' (click)='sendAction()' [disabled]='!modalForm.form.valid'>{{_action}}</button>
      </div>
    </form>
  </div>

正如您所看到的，我给表单元素命名并将其设置为 ngForm，然后在输入框上包含 required 属性，在提交按钮上使用 [disabled]=!modalForm.form.valid。但是，出现了一个问题，即使必填项为空，该表单始终被标记为有效。我在这里漏掉了什么？

- efarley

Answer 1

针对 Angular 2 RC 4：

您遗漏了一个部分，即告诉表单您的“projectName”输入应该是表单验证的一部分。只需添加“ngControl='inputId'”即可：

<input type='text' 
       name='projectName' 
       ngControl="projectName" 
       [(ngModel)]='projectName' 
       required 
       placeholder='Give your project a name...' 
       id='focusOnMe'>

对于 Angular 2.0 正式版：

1. 将 [formGroup] 添加到您的表单中：

<form [formGroup]="modalForm">

2. 将 "formControlName" 添加到您的控件中：

   <input type='text' name='projectName' formControlName="projectName" [(ngModel)]='projectName' required placeholder='给您的项目命名...' id='focusOnMe'>

- Ben Richards