Requirement in Angular Template code

sreeshsurendran · ‎05-24-2025

Hi all,

I have achieved major of my requirement, but kinda stuck in the last bit. So, the logic needed is if Mandatory fields are not filled, submit button should be disabled, not sure where I'm doing wrong, attaching the final code below to check.

<div style = "margin: 20px;padding: 10px;color: black;"> 
  <form  name="frm" novalidate autocomplete="off">
    <div  ng-if = "data.isPDPL == true && data.amendAppointmentPDPL == true" style="margin-bottom: 15px">
      <h4 class="panel-title">${Amend Appointment}</h4>
      <br>
      <input type = "radio" id = "change_appointment" ng-hide = "" ng-disabled = "c.data.radiohidden == true || data.flagPONR" value = "" ng-model = "change_appointment" name = "change" ng-click = "c.changePDPLAppointment()">
      <label for = "change_appointment" ng-disabled = "c.data.radiohidden == true || data.flagPONR" style="margin-right: 20px">Book/Change Appointment</label>
      <input type = "radio" id = "other_details" value="" ng-model = "other_details" name="change"  ng-click="c.amendOtherPDPLDetails()">
      <label for = "other_details" >Other Details</label><br>
    </div>
    <div ng-if = "data.isPDPL == true && !data.flagPONR">
      <label ng-show = "IsVisible" class = "field-label ng-scope" >  <span class = "ng-binding" style = "font-weight:bold;"> Change other details if needed </span></label>
      <br ng-show = "IsVisible">
      <input ng-hide = "true" type = "text"  ng-model = " data.appointmentid"  id="appointmentreference"/>
      <br>
      <label ng-show = "commonVisible || IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Hazard Notes</span><span ng-show='!c.data.hazard_notes' style="color:red"> *</span></label>
      <input ng-show = "commonVisible || IsVisibleOtherDetail" required class="form-control  ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.hazard_notes" name = "hazard_notes"/>
      <br>
      <label  ng-show = "commonVisible || IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Access Notes</span><span ng-show='!c.data.access_notes' style="color:red"> * </label>
      <input  ng-show = "commonVisible || IsVisibleOtherDetail" class="form-control  ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.access_notes" name = "access_notes"/>
      <br>
      <label ng-show = "commonVisible || IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Engineer Visit Notes</span><span ng-show='!c.data.engineer_visit_notes' style="color:red"> * </label>
      <input ng-show = "commonVisible || IsVisibleOtherDetail" class="form-control  ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.engineer_visit_notes" name = "engineer_visit_notes"/>
      <br>
      <label ng-show = "commonVisible || IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Site contact name</span><span ng-show='!c.data.site_contact_name' style="color:red"> *</label>
      <input ng-show = "commonVisible || IsVisibleOtherDetail" ng-change="c.onSiteContactNameChange()" class="form-control  ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.site_contact_name" name = "site_contact_name"/>
      <br>
      <label ng-show = "commonVisible || IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Site contact company name</span><span ng-show = "c.data.site_contact_name && !c.data.site_contact_company_name" style="color:red"> *</span></label>
      <input ng-show = "commonVisible || IsVisibleOtherDetail" ng-required="c.data.site_contact_name" class="form-control  ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.site_contact_company_name" name = "site_contact_company_name"/>
      <br>
      <label ng-show = "commonVisible || IsVisibleOtherDetail" class="field-label ng-scope"> <span class="ng-binding">Site contact telephone</span><span ng-show = "c.data.site_contact_name && c.data.site_contact_company_name && !c.data.site_contact_telephone" style="color:red"> *</span></label>
      <input maxlength="11" ng-pattern="/^\d{11}$/" ng-show = "commonVisible || IsVisibleOtherDetail" ng-required="c.data.site_contact_name" class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.site_contact_telephone" name = "sitecontactnumber"/>
      <!--<span ng-show="!c.data.siteConNumberValidation && c.data.site_contact_telephone" style="color:red">${Please enter a numeric value that has either 10 or 11 digits only. It should not contain any spaces, alphanumeric characters or special characters, such as + or *.}</span> -->
      <br>
      <label ng-show = "commonVisible || IsVisibleOtherDetail" class="field-label ng-scope"> <span class="ng-binding">Site contact secondary telephone</span></label>
      <input maxlength="11" ng-show = "commonVisible || IsVisibleOtherDetail" class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.site_contact_secondary_telephone" name = "site_contact_secondary_telephone"/>
      <!--<span ng-show="!c.data.siteConSecNumberValidation && c.data.site_contact_secondary_telephone" style="color:red">${Please enter a numeric value that has either 10 or 11 digits only. It should not contain any spaces, alphanumeric characters or special characters, such as + or *.}</span> -->
      <br>
      <label ng-show = "commonVisible || IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Site contact email</span><span ng-show='!c.data.site_contact_email' style="color:red"> *</label>
      <input ng-show = "commonVisible || IsVisibleOtherDetail" class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.site_contact_email"  name = "site_contact_email" />
      <br>
      <label ng-show = "commonVisible || IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Alternate Site contact name</span> </label>
      <input ng-show = "commonVisible || IsVisibleOtherDetail" ng-change="c.onSiteAlternateContactNameChange()" class="form-control  ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.alternate_site_contact_name" name = "alternate_site_contact_name"/>
      <br>
      <label ng-show = "commonVisible || IsVisibleOtherDetail" class="field-label ng-scope"> <span class="ng-binding">Alternate site contact telephone</span><span ng-show = "c.data.alternate_site_contact_name &&  !c.data.alternate_site_contact_telephone" style="color:red"> *</span></label>
      <input maxlength="11" ng-show = "commonVisible || IsVisibleOtherDetail" ng-required="c.data.alternate_site_contact_name" class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.alternate_site_contact_telephone" name = "alternate_site_contact_telephone"/>
      <!--<span  ng-show="!c.data.siteAlternateConNumberValidation && c.data.alternate_site_contact_telephone" style="color:red">${Please enter a numeric value that has either 10 or 11 digits only. It should not contain any spaces, alphanumeric characters or special characters, such as + or *.}</span> -->
      <br>    
      <label class = "field-label ng-scope" ng-show = "IsVisible" > <span class = "ng-binding">Current Appointment date</span> </label>
      <input ng-show = "IsVisible" type = "text" ng-readonly = "true" ng-model = "c.data.engineering_appointment_slot"  class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" id="appointmentreference"/>
      <br ng-show = "IsVisible">   
      <label class = "field-label ng-scope" ng-show = "IsVisible" > <span class = "ng-binding">New Appointment date</span><span ng-show="!c.selectedSlot || c.selectedSlot.id == '---None--'" style="color:red"> *</span></label>
      <div ng-show = "IsSlotVisible" ng-message="required" style="color: green;"  >${Please wait while retrieving the appointment slots...}</div>
      <select ng-show = "IsVisible" ng-model = "c.selectedSlot" class = "select2-container ng-valid ng-scope ng-isolate-scope ng-dirty ng-not-empty ng-touched ng-empty-remove ng-not-empty-add ng-valid-parse form-control" style="width: 100%;font-size:14.4px;color:#000000;"
              ng-options = "x as x.id for x in c.data.appointmentSlotOutput" ng-disabled = "c.data.hidden == true">           
      </select>
			<div ng-show="IsVisible && c.data.appointment_reference">
        <br>
        <label ng-show = "IsVisible" class="field-label ng-scope" >  <span class="ng-binding">Appointment Reference</span><span ng-show="!c.data.appointment_reference" style="color:red"> *</span></label>
        <input ng-show = "IsVisible" type="text" readonly ng-model = "c.data.appointment_reference" class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" id="appointmentreference"/>      
        <br>
      </div>

      <input ng-hide = "true" class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type = "text" ng-model = "c.selectedSlot"/>
      <!--<button ng-disabled="frm.$invalid" ng-hide = "c.data.hidden == true || !c.selectedSlot" class = "btn btn-primary" id = "reserveBtn" ng-click="c.reserveamendPDPLSlot()">-->
      <button ng-disabled="frm.$invalid || !c.selectedSlot || c.selectedSlot.id == '---None--' || !c.data.hazard_notes || !c.data.access_notes || !c.data.engineer_visit_notes || !c.data.site_contact_name || !c.data.site_contact_company_name || !c.data.site_contact_telephone || !c.data.site_contact_email ||!c.data.alternate_site_contact_name  || c.data.site_contact_name  || c.data.site_contact_secondary_telephone " ng-hide = "c.data.hidden == true || !c.selectedSlot" class = "btn btn-primary" id = "reserveBtn" ng-click="c.reserveamendPDPLSlot()">
        <span ng-if="c.spinnerPDPL == false">${Submit}</span>
        <span ng-if="c.spinnerPDPL == true"><fa name="spinner" spin="true"></fa></span>
      </button>
      <button  ng-show = "IsVisibleSubmit == true" ng-disabled="frm.$invalid || c.data.hazard_notes || c.data.access_notes || c.data.engineer_visit_notes || c.data.alternate_site_contact_name  || c.data.site_contact_name  || c.data.site_contact_secondary_telephone && " class = "btn btn-primary" id = "submitBtn"  ng-click="c.submitDetailsPDPL()">
        <span ng-if="c.spinnerPDPL == false">${Submit}</span>
        <span ng-if="c.spinnerPDPL == true"><fa name="spinner" spin="true"></fa></span>
      </button>
      <button  type = "button" name = "btn" class="btn btn-secondary" ng-click = "c.closeAmendModal()"> ${Cancel} </button>
    </div>

    <div ng-if = "data.isPDPL == true && data.flagPONR">
      <label ng-show = "IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Hazard Notes</span><span ng-show="frm.hazard_notes.$invalid" style="color:red"> *</span></label>
      <input ng-show = "IsVisibleOtherDetail" required class="form-control  ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.hazard_notes" name = "hazard_notes"/>
      <br>
      <label  ng-show = "IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Access Notes</span><span ng-show='!c.data.engineer_visit_notes' style="color:red"> *</span> </label>
      <input  ng-show = "IsVisibleOtherDetail" class="form-control  ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.access_notes" name = "access_notes"/>
      <br>
      <label ng-show = "IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Engineer Visit Notes</span> <span ng-show='!c.data.engineer_visit_notes' style="color:red"> *</span></label>
      <input ng-show = "IsVisibleOtherDetail" class="form-control  ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.engineer_visit_notes" name = "engineer_visit_notes"/>
      <br>
      <label ng-show = "IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Site contact name</span><span ng-show='!c.data.site_contact_name' style="color:red"> *</span></label>
      <input ng-show = "IsVisibleOtherDetail" ng-disabled="true" ng-change="c.onSiteContactNameChange()" class="form-control  ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.site_contact_name" name = "site_contact_name"/>
      <br>
      <label ng-show = "IsVisibleOtherDetail" class="field-label ng-scope"> <span class="ng-binding">Site contact telephone</span><span ng-show = "c.data.site_contact_name && c.data.site_contact_company_name && !c.data.site_contact_telephone" style="color:red"> *</span></label>
      <input ng-show = "IsVisibleOtherDetail" ng-disabled="true" class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.site_contact_telephone" name = "sitecontactnumber"/>
      <br>
      <label ng-show = "IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Site contact email</span><span ng-show='!c.data.site_contact_email' style="color:red"> *</span></label>
      <input ng-show = "IsVisibleOtherDetail" ng-disabled="true" class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.site_contact_email"  name = "site_contact_email" />
      <br>
      <label ng-show = "IsVisibleOtherDetail" class="field-label ng-scope" > <span class="ng-binding">Alternate Site contact name</span> </label>
      <input ng-show = "IsVisibleOtherDetail" ng-disabled="true" class="form-control  ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.alternate_site_contact_name" name = "alternate_site_contact_name"/>
      <br>
      <label ng-show = "IsVisibleOtherDetail" class="field-label ng-scope"> <span class="ng-binding">Alternate site contact telephone</span><span ng-show='!c.data.alternate_site_contact_name' style="color:red"> *</span></label>
      <input ng-show = "IsVisibleOtherDetail" ng-disabled="true" class="form-control ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched" type="text" ng-model="c.data.alternate_site_contact_telephone" name = "alternate_site_contact_telephone"/>
      <br>
      
      <button  ng-show = "IsVisibleSubmit == true" ng-disabled= "frm.$invalid" class = "btn btn-primary" id = "submitBtn"  ng-click="c.submitDetailsPDPL()">
        <span ng-if="c.spinnerPDPL == false">${Submit}</span>
        <span ng-if="c.spinnerPDPL == true"><fa name="spinner" spin="true"></fa></span>
      </button>
      <button  type = "button" name = "btn" class="btn btn-secondary" ng-click = "c.closeAmendModal()"> ${Cancel} </button>
    </div>
  </form>
</div>

Any help would be of great help 🙂

Thanks,

Sreesh

Robert H · ‎05-24-2025

Hello @sreeshsurendran ,

Without knowing the properties of your $scope and data objects it is very hard to understand and debug your HTML template. But I tried nevertheless.

The general answer is:

You just need to add the attribute ng-required="true" or ng-required="some condition" (recommended) or required (not recommended) to all input elements that are mandatory.

Then on your buttons you need to add the attribute ng-disabled="frm.$invalid".

But I noticed the following issues:

1. Invalid HTML structure

On some lines you forgot to close the </span> element within the label. You need to fix this.

Adding line breaks to your extremely long lines will help you spot such issues yourself.

2. Invalid expression in attribute

I see a total of three "Submit" buttons defined in the HTML template.

One of them has an ng-disabled attribute where the expression is incomplete (ends with && characters):

ng-disabled="frm.$invalid || c.data.hazard_notes || c.data.access_notes || c.data.engineer_visit_notes || c.data.alternate_site_contact_name  || c.data.site_contact_name  || c.data.site_contact_secondary_telephone && "

And it's not necessary to have all these other conditions in this expression. As mentioned above, ng-disabled="frm.$invalid" is all you need.

One of the buttons actually has the correct ng-disabled="frm.$invalid" attribute and works fine:

3. Missing ng-required attributes

Looking at your input fields I see a lot of red stars so I guess those fields are mandatory. But only very few of them actually have the ng-required="true" or required attribute. So you need to add those attributes.

Regards,

Robert

View solution in original post

Robert H · ‎05-24-2025