AngularJs and HTML5 required fields setting fields to empty fires validation

Question

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.

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:

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

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?

leon.io · Accepted Answer · 2013-07-09 14:59:29Z

2

To remove the HTML5 validation (since it will only work on compliant browsers) why not add the novalidate attribute to the form?

The validity of the form will still be invalid due to the 'required' attributed.

answered Jul 9, 2013 at 14:59

leon.io

2,8341 gold badge20 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

slapthelownote · Accepted Answer · 2013-07-09 22:14:43Z

0

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

answered Jul 9, 2013 at 22:14

slapthelownote

4,2791 gold badge25 silver badges27 bronze badges

Collectives™ on Stack Overflow

AngularJs and HTML5 required fields setting fields to empty fires validation

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related