angucomplete alt — How do I get the validation message to show and then hide when I select?

[wmlockhart]

Is this an issue or am I doing something wrong?

I have the following AngularJS form:

<form name="opportunityForm" novalidate>

    <div class="form-group">
        <label class="control-label">Amount</label>
        <input type="number" name="amount" class="form-control aqr" ng-model="data.opportunity.Amount" placeholder="Opportunity Amount" />
    </div>

    <div class="form-group">
        <label class="control-label">Associated with</label>
        <p class="" style="color:red;" ng-show="opportunityForm.person.$error">Please associate a Person.</p>
        <angucomplete-alt 
            id="person" 
            input-name="person" 
            field-required="true"
            placeholder="Find a person..." 
            pause="200" 
            selected-object="selectPerson" 
            input-changed="selectionChanged" 
            remote-url="/api/persons/filter?filterText="
            remote-url-data-field="" 
            title-field="FirstName,LastName" 
            description-field="" 
            input-class="form-control form-control-small" 
            match-class="red" 
            text-searching="Searching people..."
            text-no-results="No people were found that match your criteria." />
    </div>

    <div class="form-group">
        <label class="control-label">Opportunity Name</label>
        <p class="" style="color:red;" ng-show="opportunityForm.Name.$error.required">Please enter an Opportunity Name.</p>
        <input type="text" name="Name" class="form-control aqr" ng-model="data.opportunity.Name" required placeholder="Opportunity Name" />
    </div>

    <div class="form-group">
        <label class="control-label">Description</label>
        <div class="form-group">
            <textarea class="form-control aqr" ng-model="data.opportunity.Description" name="description" rows="3" placeholder="Opportunity Description" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label">Opportunity Type</label>
        <p class="" style="color:red;" ng-show="opportunityForm.OpportunityType.$error.required">Please select an Opportunity Type.</p>
        <select name="OpportunityType" ng-model="data.opportunity.OpportunityTypeId" class="form-control black" ng-options="option.OpportunityTypeId as option.Name for option in opportunitytypes" required></select>
    </div>

    <div class="form-group">
        <label class="control-label">Opportunity Stage</label>
        <p class="" style="color:red;" ng-show="opportunityForm.OpportunityStage.$error.required">Please select an Opportunity Stage.</p>
        <select name="OpportunityStage" ng-model="data.opportunity.OpportunityPipelineStageId" class="form-control black" ng-options="option.OpportunityPipelineStageId as option.DisplayName for option in opportunitypipelinestages" required></select>
    </div>

    <div class="form-group">
        <label class="control-label">Owner</label>
        <!--<input type="text" name="ownername" class="form-control aqr" ng-model="data.opportunity.OwnerName" />-->
    </div>

    <div>
        <a class="btn btn-outline btn-xs apn fr ce" ng-disabled="opportunityForm.$invalid" ng-click="sendOpportunity(data.opportunity)">Create opportunity</a>
    </div>

</form>

How do I get the validation message to show and then hide when I select from angucomplete-alt?

I have tried:

<p class="" style="color:red;" ng-show="opportunityForm.person.$error.required">Please associate a Person.</p>

and the message doesn't display.

I have also tried:

<p class="" style="color:red;" ng-show="opportunityForm.person.$error">Please associate a Person.</p>

the message shows but doesn't hide when I select.

I would really appreciate your help as this directive is really cool and I want to use it in my project.

Thanks.

[lermion]

I had same problem, i use angular-messages and my message looks: <div ng-message="required">error message</div> decision was change 'required' to 'autocomplete-required' and it's helped for me <div ng-message="autocomplete-required">error message</div>