AngularJs 和 HTML5 必填字段将字段设置为空火验证答案

【问题标题】：AngularJs and HTML5 required fields setting fields to empty fires validationAngularJs 和 HTML5 必填字段将字段设置为空火验证
【发布时间】：2013-07-07 05:07:51
【问题描述】：

我正在尝试编写一个具有以下功能的小型 Angular 应用程序：

表单以占位符文本开头。用户在所需的文本框中输入项目。 Angular 将项目推送到集合。将表单输入重置为默认值。

我的代码看起来像这样（jsfiddle：http://jsfiddle.net/Nn37v/1/）： HTML：

<div ng-controller="MyCtrl">
    <form name="talkForm">
        <input ng-model="newVoice" placeholder="Say something" required />
        <button ng-click="saySomething()">Say</button>
    </form>

    <ul>
        <li ng-repeat="c in conversation">{{c}}</li>
    </ul>
</div>

Javascript：

function MyCtrl($scope) {
    $scope.conversation =[];
    $scope.saySomething = function(){
        if ($scope.talkForm.$valid){
            //push to list
            $scope.conversation.push($scope.newVoice);
            $scope.newVoice='';
        }
    }
}

我面临的问题是当 $scope.newVoice='' 执行时，表单被渲染为无效，并且我会弹出有用的 HTML5 验证以鼓励我正确填写表单。显然这不是我想要的行为 - 使用 Angular 执行此操作的正确方法是什么？

【问题讨论】：

标签： html validation angularjs

【解决方案1】：

要删除 HTML5 验证（因为它只适用于兼容的浏览器）为什么不将 novalidate 属性添加到表单？

由于“必填”属性，表单的有效性仍然无效。

【讨论】：

【解决方案2】：

似乎 Angular 1.1.x 分支中的以下拉取请求将添加一个 $setPristine 方法来允许这种情况发生

https://github.com/angular/angular.js/pull/1127

【讨论】：