我正在研究 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>
最佳答案
我解决了它,但只是在用户的帮助下:- @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 }}
关于Angular 2模板表单验证不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44733198/