angular 4.0.0 novalidate 属性

Posted 2023-02-22

【中文标题】angular 4.0.0 novalidate 属性

【英文标题】：angular 4.0.0 novalidate attribute

【发布时间】：2017-09-02 15:05:20

【问题描述】：

迁移到 Angular 4 后，我的模板驱动表单出现了一个奇怪的问题。我的required attr 输入似乎坏了。我想默认情况下有 novalidate 属性。但我需要一些 html5 验证。尝试novalidate="false" 但没有成功。 有什么方法可以启用验证吗？现在看来，使用带有Validators.required 的响应式表单是唯一的方法。

谢谢！

我的HTML组件代码sn-p：

<form (submit)="savePhone(phone);" novalidate="false">
<h3>Новый телефон</h3>
<md-input-container>
    <input mdInput placeholder="Номер телефона"
           onlyNumber="true" name="number"
           [(ngModel)]="phone.number" required>
</md-input-container>
<md-select placeholder="Источник получения" (ngModel)="phone.source" name="source">
    <md-option *ngFor="let source of sources" [value]="source">
         source 
    </md-option>
</md-select>
<textarea name="comment" placeholder="Текст комментария"
          [(ngModel)]="phone.comment" name="comment">
</textarea>
<div layout="row" layout-align="end">
    <button class="button button--success" type="submit">
        Добавить
    </button>
</div>

【参考方案1】：

要启用 HTML5 验证，请使用

<form (submit)="savePhone(phone);" ngNativeValidate>

另见NgNoValidate source at GitHub

【讨论】：

详细说明：默认情况下，Angular4 会自动在 ngForm（您的表单标签）中添加 novalidate。众所周知，novalidate 禁用 HTML5 原生浏览器验证。如果你想启用 HTML5 验证，正如@Günter 所说，在你的表单标签中添加 Angular 的 ngNativeValidate 属性。参考：github.com/angular/angular/issues/15531

棱角分明！