Search code examples
angularjsbreeze

Angular Breeze input box type="email"


I recently added breeze into my angular project because of a change in requirements. I choose breeze because I wanted to get the metadata from the web api which I am using with entity framework. However once I got breeze configured, loaded the metadata from the webapi, and bound my newly created models to my input boxes on my forms I ran into a problem. I am using an input with the type="email" attribute and I can no longer type in that input!

I forked a project from Ward Bell on Plunker and changed the input type on the email address to "email" and I cannot type in that input either.

MyPlunk

Am I missing something? Or is this designed behaviour?


Solution

  • I think I may have found two bugs, but as for right now I just do not have the time to work on investigating any further. I just need a solution so I can move on.

    So this is what I found. When I fetchMetadata from my breeze/metadata web api, I get:

    {\"name\":\"EmailAddress\",\"type\":\"Edm.String\",\"maxLength\":\"30\",\"fixedLength\":\"false\",\"unicode\":\"true\",\"nullable\":\"false\"}

    I've made sure the the attribute on my property in my model for EmailAddress is [EmailAddress] (System.ComponentModel.DataAnnotations), but it seems the EFContextProvider isn't looking at this attribute correctly. This is where I think one bug is located. I am not sure if this project is Open Source or not, but if it is I will look into when I get time or if someone out there already knows, I would be grateful to learn if it is a bug or I just did something wrong.

    So after I get the metadata, I then go to create my first entity in the entity manager and if I look at the validators for my property EmailAddress, it only has two validators, required and maxlength. So I hooked up the EmailAddress validator.

    var emailProperty = newEmployee.entityType.getProperty("emailAddress");
    emailProperty.validators.push(breeze.Validator.emailAddress());
    

    The second bug I believe is when I use the data-z-validate attribute with the <input type="email"/> going this renders the input box unusable. Which is the problem I had with the original question. So to make it work, I am just letting breeze validate my email address and it is working fine.