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');
  }

}

我还尝试添加表单控件标记，但它也没有用

代码示例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 添加到表单并向输入控件添加必需的标记进行验证，最后添加了 {{form。有效}} 。

只有在输入控件中输入任何值时，有效才为真。

这证明我的控件是遵循必需的标记，但默认情况下，表单的默认和不可见 novalidate 会阻止它显示任何错误消息。< / p>

<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 }}