Token '.' is not a valid identifier at column of the expression in angularJS

Question

Hi I am developing web application in AngularJS. I am doing required field validation using angularjs. Required Validations are working fine. when i open my console i can see below error.

Error: [$parse:syntax] Syntax Error: Token '.' is not a valid identifier at column 49 of the expression [{ 'has-error' : ((formDoc.$submitted && formDoc..$invalid )|| (formDoc..$invalid && formDoc..$dirty))}] starting at [.$invalid )|| (formDoc..$invalid && formDoc..$dirty))}].

Below is my angular code for validation.

<div class="upload-button" ng-repeat="fileInput in fileInputs" ng-class="{ 'has-error' : ((formDoc.$submitted && formDoc.{{fileInput.Fileid}}.$invalid )|| (formDoc.{{fileInput.Fileid}}.$invalid && formDoc.{{fileInput.Fileid}}.$dirty))}">

//Some other code
</div> 

I am finding hard to figure out what i am missing in the above code. can someone help me in finding out what i am missing in the above code? Any help would be appreciated. Thank you.

Answer 1

Try this way:

<div class="upload-button"
  ng-repeat="fileInput in fileInputs" 
  ng-class="{ 'has-error':
    ((formDoc.$submitted && formDoc[fileInput].Fileid.$invalid) ||
     (formDoc[fileInput].Fileid.$invalid && formDoc[fileInput].Fileid.$dirty))
  }">

  //Some other code
</div>

Edit: although, I should add, you should probably move this logic into your controller rather than bloating the template with this kind of validation. Ie,

<div class="upload-button"
  ng-repeat="fileInput in fileInputs"
  ng-class="{'has-error': vm.hasFileInputError(fileInput) }">
</div>

Then in your controller:

function hasFileInputError(fileInput) {
  return this.formDoc.$submitted && this.formDoc[fileInput].Fileid.$invalid ||
    formDoc[fileInput].Fileid.$invalid && formDoc[fileInput].Fileid.$dirty);
}