How to validate the form using angularjs when the name field has .(dot) in it?

Question

In my form I have a input tag with name="Customer.Firstname" so when i refer to name value in angularjs its taking only customer as the value and .Firstname is going unidentified. Here is my code:

<label class="label_block" ng-hide="ApplicantDetails.Customer.FirstName.$error.required || ApplicantDetails.Customer.FirstName.$error.pattern">FirstName</label>
<span class="clearable">
    <input class="textbox"  type="text" name="Customer.FirstName" ng-model="Customer.FirstName" ng-init="Customer.FirstName='@Model.Customer.FirstName'" value="@Model.Customer.FirstName" ng-pattern="/^([a-zA-Z-']{1,30})$/" required="required"/>
</span>

Here am trying to hide the label when the textbox is empty.How can i do that?

Answer 1

You can use bracket notation to access keys with dot

<label class="label_block" ng-hide="ApplicantDetails['Customer.FirstName'].$error.required || ApplicantDetails['Customer.FirstName'].$error.pattern">FirstName</label>

Demo: Fiddle

This can be rewritten as

<label class="label_block" ng-show="ApplicantDetails['Customer.FirstName'].$valid">FirstName</label>

Demo: Fiddle