带有角度的ie11中的表单验证

Question

In my form, I have a field that is required using Angular's form validation. It looks something like:

<form id="project" name="formProject">
<input id="projectName" name="projectName" ng-model="projectForm.projectName" placeholder="Name" required />
<div ng-show="!formProject.projectName.$pristine && formProject.projectName.$error.required>
A project name is required.
</div>

The problem is, once the user puts the cursor in the input box, the error message immediately shows. It doesn't wait for the user to start typing. This is not an issue in Firefox or Chrome, just IE. Is there an easy work around?

Answer 1

You could workaround the problem by initialize the value binding with the ng-model to an empty string.

Either via ng-init :

<input id="projectName" name="projectName" ng-model="projectForm.projectName" ng-init="projectForm.projectName = ''" placeholder="Name" required="" />

Or do it in a controller:

$scope.projectForm = {
  projectName: ''
};

Example plunker: http://plnkr.co/edit/jbXJSYuIaOBO037fsyzI?p=preview

Hope this helps.