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

【问题标题】：Angular 2 template form validation not workingAngular 2模板表单验证不起作用
【发布时间】：2017-06-24 05:42:43
【问题描述】：

我正在研究 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>

【问题讨论】：

标签： angular validation

【解决方案1】：

我解决了它，但只有在用户的帮助下：- @yurzui cmets。

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

我通过 not 在表单中添加 novalidate 并将所需的标签添加到我的输入控件来验证它，最后我添加了 {{ form.有效 }}。

仅当我在输入控件中输入任何值时才有效。

这证明我的控件遵循 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 }}

【讨论】：