Angular 2模板表单验证不起作用

Question

我正在研究 Angular 2 模板模板驱动表单的示例，并从基本验证开始，但它不起作用。

我检查了我所引用的视频教程中的系统，我做了与视频中显示的完全相同的事情。

问题是当我点击提交/确定按钮时，它没有给出任何验证错误消息。我还附上了教程视频中出现的错误消息。

代码示例 1:

组件的HTML文件:

<form #form="ngForm" > 

    <input 
      type="text"
      id="name"
      required 
      placeholder="Name" 
      name="name" 
      ngModel>
    <button type="submit">OK</button>

</form>

TS 文件:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.scss']
})
export class DetailsComponent implements OnInit {

  constructor() {
    // Do stuff
  }

  ngOnInit() {
    console.log('Hello About');
  }

}

我也试过添加form-control标签，但还是不行

代码示例 2:

上述组件的修改后的 HTML 文件:

<form #form="ngForm" > 

  <div class="form-group">
    <input 
      type="text"
      class="form-control"
      id="name"
      required 
      placeholder="Name" 
      name="name" 
      ngModel>
    <button type="submit">OK</button>
  </div>

</form>

Answer 1

我解决了它，但只是在用户的帮助下:- @yurzui 评论。

这不是问题，而是我正在使用的 Angular 4 的行为，它默认将 novalidate 添加到表单。

我通过不向表单添加使用novalidate并向我的输入控件添加所需的标签来验证它，最后我添加了{{表单。有效}}。

仅当我在输入控件中输入任何值时，valid 才为真。

这证明我的控件遵循 required 标记，但表单的默认和不可见的 novalidate 阻碍它默认显示任何错误消息。

<form #form="ngForm" >

  <div class="form-group">
    <label for="firstNameId" class="control-label">First Name</label>
    <input #firstName="ngModel" type="text" class="form-control" id="firstNameId" required placeholder="Name" name="firstName" [(ngModel)]="model.firstName">
  </div>


  <button class="btn btn-primary" type="submit">OK</button>

</form>

{{ form.valid }}