AngularJs和HTML5必填字段的字段设置为空火灾验证 [英] AngularJs and HTML5 required fields setting fields to empty fires validation

问题描述

我想写具有以下功能的一小角应用：

I'm trying to write a small Angular app with the following functionality:

表开始用空的占位符文本。
用户需要在文本框输入项目。
角推项目集合。
重置表单输入默认值。

Form starts empty with placeholder text. User enters item in required textbox. Angular pushes item to collection. Reset form inputs to default.

我已经得到了code，看起来像这样（的jsfiddle： http://jsfiddle.net/ Nn37v / 1 / ）：
HTML：

I've got code that looks like this (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：

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验证弹出来鼓励我在适当的形式填写，我面临的问题是。显然，这不是我想要的行为 - 什么是角做到这一点的正确方法

The problem I'm facing is when $scope.newVoice='' executes, the form is rendered invalid and I get the helpful HTML5 validation pop up to encourage me to fill in the form properly. Obviously this is not the behaviour I want - what is the correct way to do this with Angular?

推荐答案

看来，在角的1.1.x版本分支下面拉请求将增加$ setPristine方法来允许这种情况发生。

Seems that the following pull request in 1.1.x branch of Angular will add a $setPristine method to allow this to happen

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

这篇关于AngularJs和HTML5必填字段的字段设置为空火灾验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！