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

时间:2017-06-24 05:42:43

标签: angular validation

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

enter image description here

1 个答案:

答案 0 :(得分:0)

我解决了这个问题,但只有在用户的帮助下: - @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 }}