Angular（版本 4）不接受“必需”属性

Question

在 Angular(4.0v) 中创建 模板驱动 表单时，如果 “required”属性用于输入标签它什么都不做，即表单正常加载，控制台中没有任何类型的错误，也不会在单击 submit 时抛出像“填写此字段”这样的错误消息em>按钮。

即使来自 Angular 文档的 form-validation 链接也表明它接受模板驱动方法中的“必需”属性，而不是我的问题？

<h1>Template Driven</h1>
<form (ngSubmit) = "onSubmit(f)" #f = "ngForm">
  <div>
    <div class="form-group">
      <label for="username">Username</label>
      <input type="text"
             class="form-control"
             id="username"
             placeholder="Username"
             ngModel 
             name = "username"
             required>
    </div>
    <div class="form-group">
      <label for="email">E-Mail</label>
      <input type="text"
             class="form-control"
             id="email"
             placeholder="E-mail"
             ngModel 
             name = "e-mail"
             required
             pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?">
    </div>
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password"
           class="form-control"
           id="password"
           placeholder="Password"
           ngModel 
           name = "password"
           required>
  </div>
  <div class="radio">
    <label>
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Answer 1

首先你没有任何错误信息要显示；）

因此，用户名的错误消息应该（可能）如下所示，就像在教程中一样：

<div *ngIf="username.errors && (username.dirty || username.touched)">
   <div [hidden]="!username.errors.required">
      Username is required
   </div>
</div>

然后就像在教程中一样，您需要ngModel 的模板参考， 像这样：

<input ..... #username="ngModel">

如果表单无效，则禁用按钮：

<button type="submit" [disabled]="!f.valid">Submit</button>