I have two forms in a separate accordion. The first form is an individual information form and the other one is a company information form. Here is the code
<div class="col-md-10 col-sm-12 col-md-offset-1">
<section class="basic-info">
<div class="heading text-center">
<h1>Basic Information</h1>
<p>Register as an individual OR as a company</p>
</div>
<div class="separator"></div>
<div class="custom-accordion">
<accordion close-others="oneAtATime">
<accordion-group is-open="status.isFirstOpen">
<accordion-heading>
Individual Information<i class="pull-right" ng-class="{'fa fa-angle-down': status.isFirstOpen, 'fa fa-angle-right': !status.isFirstOpen}"></i>
</accordion-heading>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>First Name</label>
<input type="text" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty) " class="form-control input-md" ng-model="user.first_name" name="first_name" placeholder="First Name" required>
</div>
<div ng-messages="SignUpForm.first_name.$error" ng-if="SignUpForm.first_name.$dirty">
<div ng-message="required">
<span>Please enter first name</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Last Name</label>
<input type="text" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty) " class="form-control input-md" ng-model="user.last_name" name="last_name" placeholder="Last Name" required>
</div>
<div ng-messages="SignUpForm.last_name.$error" ng-if="SignUpForm.last_name.$dirty">
<div ng-message="required">
<span>Please enter your last name</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Salutation</label>
<select class="form-control input-md" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty)" ng-model="user.salutation" required>
<option value="">Select Salutation</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
</select>
</div>
<div ng-messages="SignUpForm.salutation.$error" ng-if="SignUpForm.salutation.$dirty">
<div ng-message="required">
<span>Please select a salutation</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Middle Name</label>
<input type="text" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty)" class="form-control input-md" ng-model="user.middle_name" name="middle_name" placeholder="Middle Name" >
</div>
<div ng-messages="SignUpForm.middle_name.$error" ng-if="SignUpForm.middle_name.$dirty">
<div ng-message="required">
<span>Please enter your middle name</span>
</div>
</div>
</div>
</div>
</accordion-group>
<accordion-group is-open="status.open">
<accordion-heading>
Company Information<i class="pull-right" ng-class="{'fa fa-angle-down': status.open, 'fa fa-angle-right': !status.open}"></i>
</accordion-heading>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Company Name</label>
<input type="text" ng-click"check()" class="form-control input-md" ng-model="user.company_name" name="company_name" placeholder="Company Name" required
ng-disabled="(user.first_name.length > 0 || user.last_name.length > 0 || user.middle_name.length > 0 || user.salutation.length > 0) && (SignUpForm.middle_name.$dirty || SignUpForm.first_name.$dirty|| SignUpForm.last_name.$dirty || SignUpForm.salutation.$dirty)">
</div>
<div ng-messages="SignUpForm.company_name.$error" ng-if="SignUpForm.company_name.$dirty">
<div ng-message="required" >
<span>Please enter a company name</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Company Number</label>
<input type="text" class="form-control input-md" ng-model="user.company_number" name="company_number" placeholder="Company Number" required ng-disabled="(user.first_name.length > 0 || user.last_name.length > 0 || user.middle_name.length > 0 || user.salutation.length > 0) && (SignUpForm.middle_name.$dirty || SignUpForm.first_name.$dirty || SignUpForm.last_name.$dirty || SignUpForm.salutation.$dirty)">
</div>
</div>
<div ng-messages="SignUpForm.company_number.$error" ng-if="SignUpForm.company_number.$dirty">
<div ng-message="required">
<span>Please enter company number</span>
</div>
</div>
</div>
</accordion-group>
</accordion>
</div>
<div class="navigation-btns text-center">
<a ui-sref="form.accountInfo" class="btn btn-info back-btn" ng-click="update(15)">Back</a>
<a ui-sref="form.address" class="btn btn-info continue-btn" ng-click="update(31)">Save and Continue</a>
</div>
<div class="clearfix"></div>
<div class="separator"></div>
</section>
The user should only be able to fill out one of the forms and the other one should be disabled. I am using ngdisabled to accomplish the ojbective; however if the user enters a value in at least one of the input field of one of the individual information form and then decide to clear what they have entered and fill out the company information form instead, validation message errors will be shown in the individual form. So my question is, how can I get rid of the input error message?
