johannesjo / ng-fab-form

Convenient forms for Angular with no extra markup? Fabulous!
https://johannesjo.github.io/ng-fab-form
MIT License
172 stars 25 forks source link

validate field without required attribute #90

Open zztop101 opened 8 years ago

zztop101 commented 8 years ago

Hi,

How can I validate email address when there is no "required" attribute

This does not display invalid email: <input type="email" class="form-control" placeholder="Email" ng-model="formData.email" >

This displays invalid email but field is required, when I want it optional. <input type="email" class="form-control" placeholder="Email" ng-model="formData.email" required >

I tried this which is a step closer, However when the form initially appears it is already ticked. It does not seem to matter what is the ng-required field.

`<input type="email" class="form-control" placeholder="Email" ng-model="formData.email" ng-required="formData.email.length > 0"

`

johannesjo commented 8 years ago

Hello @zztop101! Thank you for reporting the issue. I find it a little weird, because this worked just fine before. My first guess is that this is a bug with angular itself, as somehow the ng-valid-required class is applied initially when using ng-required: http://plnkr.co/edit/8g37JSSaxb4F5GsWGPbz?p=preview http://plnkr.co/edit/nqPhJkmag3AQdntFRbEN?p=preview (without ngFabForm)

zztop101 commented 8 years ago

Hi, if you add ng-required="!required" it will not have the green tick when it loads initially. However, if you type in the field then remove what you type, it will then come up as "required field". According to the quote below, I don't think you can use ng-required. Maybe you need to add a new directive to fab-forms.

The ng-required directive is necessary to be able to shift the value between true and false. In HTML, you cannot set the required attribute to false (the presence of the required attribute makes the element required, regardless of its value).